Are you looking for a step-by-step guide on how to create a login form in HTML and CSS? You’ve come to the right place. A well-designed login form is crucial for any website or web application that requires user authentication. It serves as the entry point for users to access their personalized data securely.
In this guide, we’ll teach you how to design a responsive and user-friendly login form in HTML and CSS. Whether you’re a beginner or an experienced developer, this tutorial will walk you through everything you need to know.
Why is a Login Form Important?
A login form provides security, allowing users to log in with unique credentials. Beyond functionality, the design of a login form significantly impacts the user experience. With clean code and responsive design, you ensure that your form is visually appealing on all devices.
In this guide on how to create a login form in HTML and CSS, we’ll:
- Build the form structure using HTML.
- Style the form for a modern and clean look using CSS.
- Add responsiveness to make it mobile-friendly.
How to Create a Login Form in HTML and CSS
Step 1: Creating the HTML Structure
The HTML portion of your login form in HTML and CSS serves as the backbone of your design. Below is the HTML code to create a simple yet effective login form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn how to create a login form in HTML and CSS. This guide includes step-by-step instructions, responsive design tips, and clean coding practices.">
<title>Login Form in HTML and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form action="/submit_form" method="post" class="login-form">
<div class="imgcontainer">
<img src="avatar.png" alt="Avatar" class="avatar">
</div>
<div class="form-container">
<label for="username"><b>Username</b></label>
<input type="text" id="username" name="username" placeholder="Enter Username" required>
<label for="password"><b>Password</b></label>
<input type="password" id="password" name="password" placeholder="Enter Password" required>
<button type="submit" class="login-btn">Login</button>
<label>
<input type="checkbox" name="remember"> Remember Me
</label>
</div>
<div class="form-footer">
<button type="button" class="cancel-btn">Cancel</button>
<span class="forgot-psw">Forgot <a href="#">Password?</a></span>
</div>
</form>
</body>
</html>
This code includes all the essential components of a basic login form in HTML and CSS, such as:
- Input fields for the username and password.
- A submit button for user authentication.
- Additional features like a “Remember Me” checkbox and a “Forgot Password” link.
Step 2: Styling the Form with CSS
Once you’ve created the structure, the next step in learning how to create a login form in HTML and CSS is to style it using CSS. A visually appealing design enhances the user experience.
Here’s the CSS code:
/* General styles */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Login form container */
.login-form {
border: 2px solid #ccc;
border-radius: 10px;
width: 300px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
/* Avatar image */
.imgcontainer {
text-align: center;
padding: 20px 0;
}
img.avatar {
width: 80px;
border-radius: 50%;
}
/* Form fields */
.form-container {
padding: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
/* Buttons */
button {
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
margin: 10px 0;
cursor: pointer;
}
.login-btn {
background-color: #4CAF50;
color: white;
}
.login-btn:hover {
background-color: #45a049;
}
.cancel-btn {
background-color: #f44336;
color: white;
}
.cancel-btn:hover {
background-color: #e41f1f;
}
/* Footer styles */
.form-footer {
padding: 10px;
background-color: #f1f1f1;
text-align: center;
}
.forgot-psw {
display: block;
margin-top: 10px;
}
.forgot-psw a {
color: #007BFF;
text-decoration: none;
}
.forgot-psw a:hover {
text-decoration: underline;
}
This CSS ensures that your login form in HTML and CSS is both visually appealing and easy to use.
Step 3: Making the Login Form Responsive
Responsive design is critical for modern web development. Use the following media query to optimize the form for smaller screens:
@media screen and (max-width: 400px) {
.login-form {
width: 90%;
}
.forgot-psw {
font-size: 12px;
}
}
With this addition, your login form in HTML and CSS will adapt seamlessly to different screen sizes.
Creating an Elegant Modal Login Form
A modal login form is an excellent way to provide users with a smooth and focused login experience. Here’s how you can create a sleek modal login form using HTML, CSS, and a touch of JavaScript. The form includes animations, accessibility, and a visually appealing design. Below is the HTML and CSS for the modal login form:
HTML (Structure)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Modal Login Form</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="/action_page.php" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="uname" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f8f9fa">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
CSS (Design)
Save this CSS in a separate file named styles.css:
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f4f9;
}
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #007BFF;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
border-radius: 5px;
transition: 0.3s;
}
button:hover {
background-color: #0056b3;
opacity: 0.9;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #dc3545;
color: white;
border-radius: 5px;
}
.cancelbtn:hover {
background-color: #a71d2a;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 10%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
color: #007BFF;
}
span.psw a {
color: #007BFF;
text-decoration: none;
}
span.psw a:hover {
text-decoration: underline;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #ffffff;
margin: 5% auto 15% auto;
border: 1px solid #ddd;
border-radius: 10px;
width: 80%;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #555;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #dc3545;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
@-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0);
}
to {
-webkit-transform: scale(1);
}
}
@keyframes animatezoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
/* Responsive design for small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
How It Works
1. Save the HTML and CSS in Their Respective Files
The first step is to create two separate files to organize the code properly:
- HTML File: Save the HTML code in a file with a
.htmlextension (e.g.,index.html). This file contains the structure of the webpage, including the modal login form, buttons, and JavaScript. - CSS File: Save the CSS code in a file with a
.cssextension (e.g.,styles.css). This file contains the styles and visual design of the webpage, such as colors, spacing, fonts, and animations.
By keeping the HTML and CSS separate, you make the code easier to manage, update, and reuse.
2. Link the styles.css File to the HTML
To connect the CSS file to the HTML, include a <link> tag in the <head> section of the HTML file. This tag tells the browser to load and apply the styles from the CSS file.
Here’s the syntax for linking the CSS file:
<link rel="stylesheet" href="styles.css">
rel="stylesheet": Specifies that the file is a stylesheet.href="styles.css": Points to the location of the CSS file. If the CSS file is in the same directory as the HTML file, you can simply use the filename (e.g., styles.css). If it’s in a subfolder, provide the relative path (e.g., css/styles.css).
For example:
<head>
<title>Modal Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
When the browser loads the HTML file, it will automatically apply the styles defined in the linked CSS file.
3. JavaScript Handles Opening and Closing the Modal
The JavaScript code in the HTML is responsible for making the modal interactive. Specifically, it does the following:
Opening the Modal:
The onclick event is attached to the Login button.
When the button is clicked, the modal is displayed by changing its display style property from none to block.
Code in the button:
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
This accesses the modal using document.getElementById('id01') and modifies its style.display.
Closing the Modal:
The modal can be closed by:
Clicking the Close (x) button inside the modal.
Clicking anywhere outside the modal.
The Close (x) button calls a similar function to set the modal’s display property back to none:
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
For closing when clicking outside the modal, this JavaScript code is used:
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
This checks if the user clicked outside the modal (event.target == modal) and hides the modal if true.
Summary of the Workflow:
- HTML: Provides the structure of the modal, including buttons, inputs, and placeholders for content.
- CSS: Adds the design elements like color, animations, padding, and responsiveness to create an appealing user interface.
- JavaScript: Handles the dynamic behavior, such as showing and hiding the modal, and ensures a seamless user experience.
Result
See the Pen Simple Modal Login Form by Rajesh Rai (@RajeshRai) on CodePen.
Conclusion
By following this guide, you’ve successfully learned how to create a login form in HTML and CSS. With a strong focus on responsive design, clean styling, and user-friendly interactions, you now have a login form that works well on any device.
Whether you’re building a static site or a web application, this tutorial provides the foundation for creating a reliable login form in HTML and CSS. Feel free to customize and expand upon it to meet your specific project requirements!
How to Convert HTML to PDF in Java: 3 Easy Steps