Introduction:
User authentication is a crucial part of any website or web application. A well-designed login and registration page not only enhance user experience but also makes your website look more professional.
In this blog, I’ll guide you through creating stylish login and registration forms using simple HTML and CSS, perfect for beginners looking to understand the basics of form design.
1.1 What is a Login Page?
A login page allows existing users to access their accounts by entering their username and password.
1.2 Features of Our Login Page:
1.3 Code Breakdown:
HTML Structure:
CSS Styling:
HTML
<div class=”containermain”>
<div class=”Subcontainerleft”>
<p>Simple</p><br><p>Login Form</p> <br><p>HTML & CSS</p>
</div>
<div class=”Subcontainerright”>
<div class=”formcontainer”>
<h1>login</h1>
<hr class=”divider”>
<form action=”Signup Page.html” method=”POST”>
<label for=”username”> </label><br>
<input type=”text” class=”input-line” name=”username” placeholder=”Enter your username”><br><br>
<label for=”password”></label>
<input type=”password” class=”input-line” name=”password” placeholder=”password”><br><br>
<input type=”submit” class=”submit” value=”Login”><br><br>
<p class=”Needaccount”>Doesn’t Have an account?
<a href=”Signup Page.html” class=”signup-link”>Sign Up</a>
</p><br><br>
</div>
</div>
</div>
CSS
body {
background-color: #3490CC;
}
.containermain
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.Subcontainerleft
{
margin-right: 100px;
padding-left: 10px;
justify-content: center;
align-items: center;
background-color: #3490CC;
border-left: 10px;
border-right: 0;
border-top: 0;
border-bottom: 0;
border-style: solid;
border-color: #FFFFFF;
font-size:75px;
font-weight: 800;
line-height: 0;
font-family: ‘Arial’, sans-serif;
color: #FFFFFF;
}
.Subcontainerright
{
background-color: #ffffff;
border-radius: 15px;
min-height: 20rem;
width: 30rem;
display: flex;
justify-content: center;
align-items: center;
}
.formcontainer h1
{
text-align: center;
width: 25rem;
font-size: 24px;
font-weight: bold;
font-family:’Poppins’, sans-serif;
color: #000000;
letter-spacing: 2px;
margin-bottom: 20px;
padding: 0;
}
.divider {
border: none;
height: 2px;
background-color: grey;
margin: 10px 0;
width: 100% !important;
}
.input-line
{
border: none !important;
border-bottom: 1px solid grey !important;
background: transparent !important;
outline: none !important;
width: 100%;
font-size: 16px;
padding: 5px 0;
box-shadow: none !important;
appearance: none;
text-align: left;
}
.submit
{
background-color: #3490CC;
color: #FFFFFF;
border: none;
border-radius: 90px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
width: 100%;
margin-top: 20px;
}
.signup-link
{
color: blue;
font-weight: bold;
}
Output
Section 2: The Registration Page
2.1 What is a Registration Page?
A registration page collects user details like name, email, phone number, and password to create a new account. This form often includes validations to ensure data accuracy.
2.2 Features of Our Registration Page:
2.3 Code Breakdown:
HTML Structure:
CSS Styling:
HTML
<<html>
<head>
<title> Signup Page </title>
<link rel=”stylesheet” href=”./css/signup.css”>
</head>
<body>
<div class=”formcontainer”>
<h2>Registration</h2>
<hr class=”divider”>
<form action=”Signup Page.html” method=”POST”>
<div class=”row1″>
<div class=”column1″>
<label for=”Full Name”><p>Full Name</p></label>
<input type=”text” class=”input-line” name=”Full Name” placeholder=”Enter your Name”>
</div>
<div class=”column1″>
<label for=”username”><p>User Name</p></label>
<input type=”text” class=”input-line” name=”username” placeholder=”Enter your username”>
</div>
</div>
<br>
<div class=”row2″>
<div class=”column2″>
<label for=”email”><p>Email</p></label>
<input type=”email” class=”input-line” name=”email” placeholder=”Enter your email”>
</div>
<div class=”column2″>
<label for=”Phone Number”><p>Phone Number</p></label>
<input type=”number” class=”input-line” name=”Phone Number” placeholder=”Phone Number”><br>
</div>
</div>
<br>
<div class=”row3″>
<div class=”column3″>
<label for=”password”><p>Password</p></label>
<input type=”Password” class=”input-line” name=”Password” placeholder=”Enter your password”>
</div>
<div class=”column3″>
<label for=”Confirm Password”><p>Confirm Password</p></label>
<input type=”password” class=”input-line” name=”Confirm Password” placeholder=”Confirm Password”><br>
</div>
</div>
<br>
<div class=”row4″>
<p><b>Gender</b></p>
<div class=”gender-options”>
<label>
<input type=”radio” name=”gender” value=”male”> Male
</label>
<label>
<input type=”radio” name=”gender” value=”female”> Female
</label>
<label>
<input type=”radio” name=”gender” value=”Prefer not to say”> Prefer not to say
</label>
</div>
</div>
<div class=”row5″>
<div class=”column5″>
<p><b>Upload File</b></p>
<input type=”file” class=”file-upload” name=”uploadedFile” accept=”.jpg,.jpeg,.png,.pdf”>
</div>
<div class=”column5″>
<label for=”country”><p><b>Select Country</b></p></label>
<select id=”country” name=”country” class=”dropdown”>
<option value=”” disabled selected>Select your country</option>
<option value=”india”>India</option>
<option value=”usa”>United States</option>
<option value=”uk”>United Kingdom</option>
<option value=”canada”>Canada</option>
<option value=”australia”>Australia</option>
</select>
</div>
</div>
<div class=”row6″>
<div class=”column6″>
<p><b>Date of birth</b></p>
<input type=”date” class=”input-line” name=”dob” placeholder=”Date of Birth”>
</div>
</div>
<br>
<input type=”submit” class=”submit” value=”Register”><br><br>
cs <br>
</form>
</body>
</html>
CSS
body
{
background-image: linear-gradient(to bottom right, rgba(120, 182, 224, 0.747), rgb(137, 99, 241));
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.formcontainer {
background-color: #ffffff;
border-radius: 15px;
min-height: 20rem;
width: 50%;
display: flex;
justify-content: center;
flex-direction: column;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.input-line
{
padding-top: 0%;
}
.row1{
display: flex;
justify-content: space-between;
gap: 20px;
}
.column1
{
flex: 1;
font-family: ‘Poppins’, sans-serif;
}
.row2
{
display: flex;
justify-content: space-between;
gap: 20px;
}
.column2
{
flex: 1;
font-family: ‘Poppins’, sans-serif;
}
.row3
{
display: flex;
justify-content: space-between;
gap: 20px;
}
.column3
{
flex: 1;
font-family: ‘Poppins’, sans-serif;
}
.input-line {
width: 100%;
padding: 10px; /* Increases the height of the input field */
font-size: 16px; /* Increases the font size of the text inside the input */
border: 1px solid #ccc; /* Optional: Adds a border for better visibility */
border-radius: 5px; /* Optional: Adds rounded corners */
box-sizing: border-box; /* Ensures padding doesn’t affect the width */
}
.formcontainer h2 {
text-align: left !important;
font-size: 28px;
font-weight: bold;
color: #333;
margin-bottom: 10px;
margin-left: 0;
font-family: ‘Poppins’, sans-serif;
}
.submit
{
background-image: linear-gradient(to bottom right, rgba(120, 182, 224, 0.747), rgb(137, 99, 241));
color: #FFFFFF;
border: none;
border-radius: 90px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
width: 100%;
margin-top: 20px;
}
.divider {
border: none;
height: 3px;
background-image: linear-gradient(to bottom right, rgba(120, 182, 224, 0.747), rgb(137, 99, 241));
margin: 0px 0;
width: 10% !important;
}
.row4
{
font-family: ‘Poppins’, sans-serif;
}
.gender-options {
display: flex;
gap: 30px;
align-items: center;
}
.gender-options label
{
display: flex;
align-items: center;
gap: 10px;
}
.gender-options input[type=”radio”]
{
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
border: 1px solid #333;
appearance: none;
background-color: #fff;
}
.gender-options input[type=”radio”]:checked
{
background-image: linear-gradient(to bottom right, rgba(120, 182, 224, 0.747), rgb(137, 99, 241));
background-image: linear-gradient(to bottom right, rgba(120, 182, 224, 0.747), rgb(137, 99, 241));
}
.dropdown {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background-color: #fff;
}
.row5
{
display: flex;
justify-content: space-between; /* Adds space between the columns */
gap: 20px; /* Adds spacing between the file upload and dropdown sections */
align-items: flex-start;
font-family: ‘Poppins’, sans-serif;
font-size: 16px;
color: #333;
margin-top: 10px;
}
.column5 {
flex: 1; /* Ensures both columns take equal width */
font-family: ‘Poppins’, sans-serif;
}
.row6
{
justify-content: center; /* Adds space between the columns */
font-family: ‘Poppins’, sans-serif;
font-size: 16px;
color: #333;
margin-top: 10px;
}
.file-upload {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
cursor: pointer;
background-color: #fff;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.file-upload:hover {
border-color: #3490CC; /* Changes border color on hover */
box-shadow: 0 0 5px rgba(52, 144, 204, 0.5); /* Adds a subtle shadow on hover */
}
.file-upload:focus {
outline: none;
border-color: #3490CC; /* Highlights the border on focus */
box-shadow: 0 0 5px rgba(52, 144, 204, 0.5); /* Adds a shadow on focus */
}
Output
