Creating a Login Form with HTML and CSS
A login form is an essential element of many websites and applications. It provides a way for users to access their accounts and authenticate themselves. In this article, we will create a stylish and interactive login form using HTML and CSS.
This login form will have two tabs: "Sign In" and "Sign Up". Users can switch between these tabs to either log in to their existing accounts or sign up for new accounts. The design is sleek and visually appealing, making it a great addition to modern web applications.
HTML Structure:
The HTML structure consists of a container div with two radio input elements to toggle between "Sign In" and "Sign Up" tabs. Inside the container, there are two div elements for the "Sign In" and "Sign Up" forms. Each form contains input fields for username, password, and additional information for signing up.
The CSS styling defines the appearance of the login form. It includes background images, colors, transitions, and various styles for form elements such as labels, input fields, and buttons. The form is designed to be responsive and visually appealing.
The form input fields have a modern design and styling.
Password input fields have a circle to mask the password characters.
The "Keep me Signed in" checkbox is provided for the sign-in form.
Upon submission, the form will display a message if the user's credentials are invalid.
The design is responsive and works well on different screen sizes.
Conclusion:
Creating an attractive and functional login form is important for user experience. This article demonstrated how to build a stylish login form using HTML and CSS. This form design can be easily integrated into various websites and applications to enhance their user authentication process.
Remember that this is just one example of a login form design. You can customize the design further based on your project's requirements and branding guidelines. With HTML and CSS, you have the tools to create visually appealing and user-friendly forms for your website or application.
A login form is an essential element of many websites and applications. It provides a way for users to access their accounts and authenticate themselves. In this article, we will create a stylish and interactive login form using HTML and CSS.
This login form will have two tabs: "Sign In" and "Sign Up". Users can switch between these tabs to either log in to their existing accounts or sign up for new accounts. The design is sleek and visually appealing, making it a great addition to modern web applications.
HTML Structure:
The HTML structure consists of a container div with two radio input elements to toggle between "Sign In" and "Sign Up" tabs. Inside the container, there are two div elements for the "Sign In" and "Sign Up" forms. Each form contains input fields for username, password, and additional information for signing up.
<input id="check" type="checkbox" class="check" checked>
<label for="check"><span class="icon"></span> Keep me Signed in</label>
</div>
<div class="group">
<input type="submit" class="button" value="Sign In">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<a href="#forgot">Forgot Password?</a>
</div>
</div>
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" type="text" class="input">
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="pass" class="label">Repeat Password</label>
<input id="pass" type="password" class="input" data-type="password">
</div>
<div class="group">
<label for="pass" class="label">Email Address</label>
<input id="pass" type="text" class="input">
</div>
<div class="group">
<input type="submit" class="button" value="Sign Up">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">Already Member?</a>
</div>
</div>
</div>
</div>
</div>
CSS Styling:The CSS styling defines the appearance of the login form. It includes background images, colors, transitions, and various styles for form elements such as labels, input fields, and buttons. The form is designed to be responsive and visually appealing.
.login-form .group label .icon:before{
left:3px;
width:5px;
bottom:6px;
transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
top:6px;
right:0;
transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
color:#fff;
}
.login-form .group .check:checked + label .icon{
background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
transform:rotate(0);
}
.hr{
height:2px;
margin:60px 0 50px 0;
background:rgba(255,255,255,.2);
}
.foot-lnk{
text-align:center;
}
Form Functionality:Users can switch between the "Sign In" and "Sign Up" forms using the tabs.The form input fields have a modern design and styling.
Password input fields have a circle to mask the password characters.
The "Keep me Signed in" checkbox is provided for the sign-in form.
Upon submission, the form will display a message if the user's credentials are invalid.
The design is responsive and works well on different screen sizes.
Conclusion:
Creating an attractive and functional login form is important for user experience. This article demonstrated how to build a stylish login form using HTML and CSS. This form design can be easily integrated into various websites and applications to enhance their user authentication process.
Remember that this is just one example of a login form design. You can customize the design further based on your project's requirements and branding guidelines. With HTML and CSS, you have the tools to create visually appealing and user-friendly forms for your website or application.
