Sponsored

Simple Login and Register Template — How I Use and Customize It

Published on:   |  Author: uptohit  |  4 min read
Login and Register Form Template in HTML, CSS and JavaScript
Login and Register Form Template in HTML, CSS and JavaScript

I recently worked with a clean login and register template that originally belonged to codlico.com. I adapted it for a small project, and I recommend checking the license on codlico.com and giving proper credit if you reuse it.

I will walk you through the template in plain language and provide practical tips. The form has two tab states: Login and Register. The register forms section includes fields for full name, email, password, and confirm password. For quick testing I open the Codlico HTML code editor online so I can edit HTML, tweak CSS, and see changes live. If you are learning JavaScript, wire simple client-side validation for email and matching passwords because this template teaches how to build an online registration form and improves user experience.

Sponsored

Design Notes

The template uses soft shadows, rounded buttons, and subtle focus styles. If you want to practice HTML & CSS design and build websites, break the layout into semantic HTML and modular CSS. Use classes for form controls so you can reuse styles across pages. For those who are keen to learn CSS or CSS coding, experiment with spacing, border-radius, and transition timing to make the toggles feel snappy.

SEO and Performance Tips

Keep the markup semantic, add descriptive labels, and include a unique title and meta description for the page. Minify CSS and defer noncritical JS so the page loads fast, and as a result search engines and users respond better. If you teach others, show them how to use an HTML editor or an online HTML editor to edit templates and preview results.

This template is a solid starting point for people who want to learn HTML and CSS, build websites, and practice building register forms or login pages. Remember to credit codlico.com when required and test everything in multiple browsers.

Sponsored

HTML Code

Login and Register Template
HTML Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Login / Register Form</title>
         <link rel="stylesheet" href="styles.css" />
  </head>
<body>
<div class="auth-container">
<div class="tab-switch">
        <button id="login-tab" class="active">Login</button>
<button id="register-tab">Register</button></div>
<form id="auth-form">
<div class="form-section" id="login-section">
<div class="input-group">
            <input type="email" id="login-email" required />
<label for="login-email">Email</label></div>
<div class="input-group">
            <input type="password" id="login-password" required />
<label for="login-password">Password</label></div>
<button type="submit" class="primary-btn">Sign In</button>
<a href="#" class="forgot-link">Forgot password?</a></div>
<div class="form-section hidden" id="register-section">
<div class="input-group">
            <input type="text" id="reg-name" required />
<label for="reg-name">Full Name</label></div>
<div class="input-group">
            <input type="email" id="reg-email" required />
<label for="reg-email">Email</label></div>
<div class="input-group">
            <input type="password" id="reg-password" required />
<label for="reg-password">Password</label></div>
<div class="input-group">
            <input type="password" id="reg-password-confirm" required />
<label for="reg-password-confirm">Confirm Password</label></div>
<button type="submit" class="primary-btn">Create Account</button></div>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Sponsored

CSS Code

Login and Register Template
CSS Code
CSS
:root {
–main-bg: #f0f4f8;
–card-bg: #ffffff;
–primary: #5a67d8;
–primary-hover: #434190;
–accent: #48bb78;
–text: #2d3748;
–border-radius: 0.75rem;
–transition: 0.3s ease;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(–main-bg);
font-family: "Inter", sans-serif;
color: var(–text);
}
.auth-container {
background: var(–card-bg);
border-radius: var(–border-radius);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
padding: 2rem;
animation: fadeIn 0.5s;
}
.tab-switch {
display: flex;
margin-bottom: 1.5rem;
border-radius: var(–border-radius);
overflow: hidden;
background: #e2e8f0;
}
.tab-switch button {
flex: 1;
padding: 0.75rem 0;
border: none;
background: transparent;
cursor: pointer;
font-size: 1rem;
transition: background var(–transition);
}
.tab-switch button.active {
background: var(–primary);
color: #fff;
}
.form-section {
display: grid;
gap: 1rem;
}
.input-group {
position: relative;
margin-top: 1rem;
}
.input-group input {
width: 100%;
padding: 0.75rem 0.5rem;
border: 1px solid #cbd5e0;
border-radius: var(–border-radius);
background: transparent;
transition: border-color var(–transition);
}
.input-group input:focus {
outline: none;
border-color: var(–primary);
}
.input-group label {
position: absolute;
top: 50%;
left: 0.75rem;
transform: translateY(-50%);
background: var(–card-bg);
padding: 0 0.25rem;
color: #a0aec0;
pointer-events: none;
transition: transform var(–transition), font-size var(–transition);
}
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
transform: translateY(-1.5rem);
font-size: 0.85rem;
}
.primary-btn {
width: 100%;
padding: 0.75rem;
background: var(–primary);
color: #fff;
border: none;
border-radius: var(–border-radius);
cursor: pointer;
font-size: 1rem;
transition: background var(–transition), transform var(–transition);
}
.primary-btn:hover {
background: var(–primary-hover);
transform: translateY(-2px);
}
.forgot-link {
text-align: right;
display: block;
font-size: 0.9rem;
color: var(–accent);
text-decoration: none;
margin-top: -0.5rem;
transition: color var(–transition);
}
.forgot-link:hover {
color: var(–primary);
}
.hidden {
display: none;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
Sponsored

JS Code

Login and Register Template
JS Code
JAVASCRIPT
document.addEventListener("DOMContentLoaded", () => {
const loginTab = document.getElementById("login-tab");
const registerTab = document.getElementById("register-tab");
const loginSection = document.getElementById("login-section");
const registerSection = document.getElementById("register-section");
const form = document.getElementById("auth-form");
loginTab.addEventListener("click", () => toggleForm("login"));
registerTab.addEventListener("click", () => toggleForm("register"));
function toggleForm(mode) {
if (mode === "login") {
loginTab.classList.add("active");
registerTab.classList.remove("active");
loginSection.classList.remove("hidden");
registerSection.classList.add("hidden");
} else {
registerTab.classList.add("active");
loginTab.classList.remove("active");
registerSection.classList.remove("hidden");
loginSection.classList.add("hidden");
}
}
form.addEventListener("submit", (e) => {
e.preventDefault();
const isLogin = !registerSection.classList.contains("hidden");
if (isLogin) {
const email = document.getElementById("login-email").value;
const pass = document.getElementById("login-password").value;
console.log("Login:", { email, pass });
alert(`Welcome back, ${email}!`);
} else {
const name = document.getElementById("reg-name").value;
const email = document.getElementById("reg-email").value;
const pass1 = document.getElementById("reg-password").value;
const pass2 = document.getElementById("reg-password-confirm").value;
if (pass1 !== pass2) {
alert("Passwords do not match!");
return;
}
console.log("Register:", { name, email, pass1 });
alert(`Account created for ${name}!`);
}
form.reset();
toggleForm("login");
});
});
Sponsored

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Subscribe
Subscribe
Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock