A login form is one of the most vital features in web development. It makes it possible to identify users and, based on that identification, either admit entry to a private area or block it.
- To standard field Architecture, such a form usually combines a field for input of a username or e-mail address with another field for a password. It features a button to log in. More often than not, the form would allow new users to signup or register.
- When the user clicks the submit button the form sends back what was entered to the server. The server then verifies that the credentials are correct. In case of matching login details with the stored data, access will be permitted to secure content on the site. If the details are wrong an error message will be shown. The user can then try again.
- This is an important HTML login form that would work in securing Web applications. It provides access. It allows handling a user authentication process with the protection of sensitive information against access by users who are not authorized.
Throughout this guide, you will be instructed on creating a fundamental login form with appropriate design and extra security functionalities. Initially, we will set up the structure in HTML, followed by the step-by-step addition of form components. Ultimately, we will elevate the aesthetics using CSS.
Step 1: Setting Up the HTML Document
To begin, the initial step is to establish the HTML document. Launch your preferred code editor, initiate a new file, and construct the fundamental HTML framework by integrating the essential tags to lay the foundation for your project. Start the process.
<!DOCTYPE html>
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
</body>
</html>
Step 2: Creating the Form Element
Inside the body section, establish a form element to encompass various input fields and buttons necessary for a login form. Specify the action attribute to direct users to the URL responsible for processing the form data, typically a server-side script. Configure the method attribute as "POST" to guarantee the secure transmission of data.
<form action="process_login.php" method="post"> </form>
Step 3: Adding Input Fields
Include a pair of input fields within the form section. One should be designated for the username, while the other is intended for the password. The input element should specify type="text" for the username field and type="password" for the password field. It is advisable to use distinct labels for each field to enhance accessibility and user experience.
<form action="process_login.php" method="post">
<div class="imgcontainer">
<img src="https://placehold.co/400x300/3498db/ffffff?text=Profile" 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:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
Step 4: Next, Add a Submit Button
Include a form submission button that incorporates the <button> component and set its type to "submit". By doing this, users will be able to send form data to the server. It's essential to give this button a clear label that indicates its purpose, such as "Login" or "Submit".
Step 5: Adding More Features (Optional)
Enhance the functionality of your login form by adding robust support for the "Remember Me" option and incorporating a direct link to the "Forgot Password" section. These enhancements will elevate the user experience by offering additional conveniences and significantly improving ease of access.
<form action="process_login.php" method="post">
<div class="imgcontainer">
<img src="https://placehold.co/400x300/3498db/ffffff?text=Profile" 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:#f1f1f1">
<button type="button" class="cancelbtn">Cancel</button>
<span class="psw">Forgot <a href="#">password?</a></span>
</div>
</form>
Step 6: Adding CSS for Styling
CSS can be utilized to enhance the visual appeal of a login form. Below is a sample demonstration of how you could apply styling to the form's elements to improve its aesthetics.
Begin by establishing a background color to serve as the base. Following this, direct attention to the container element. Apply padding to guarantee sufficient spacing. Incorporate borders and shadows to create a sense of depth. These subtle modifications significantly enhance the visual attractiveness of the layout.
Consistency plays a crucial role in input fields. It is important to maintain uniform margins and padding throughout. Additionally, incorporate focus styles to direct the user's focus effectively. By enhancing interactivity, the form is transformed into a more user-centric and engaging experience.
Shift your attention to the submit button as the final step. Opt for contrasting colors to ensure it pops on the form. Incorporate hover effects to enhance user engagement. This combination enhances the form's functionality and visual appeal, resulting in a well-rounded user experience.
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Style for buttons */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Hover effect*/
button:hover {
opacity: 0.8;
}
/* Styling the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the avatar image */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
/* Avatar image */
img.avatar {
width: 40%;
border-radius: 50%;
}
/* Padding for containers */
.container {
padding: 16px;
}
/* "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
/* Responsive design for smaller screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
Step 7: Creating Modal Login Form (Optional)
Looking for a more interactive solution? You can implement a modal login form for your website. Let's explore how you can achieve this.
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<img src="https://placehold.co/400x300/3498db/ffffff?text=Profile" 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:#f1f1f1">
<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>
CSS Code:
.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.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5px auto;
border: 1px solid #888;
width: 80%;
}
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
.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);}
}
Extra JavaScript for Modal
The following line of code in JavaScript is responsible for closing the modal when the user clicks outside of the modal body.
var modal = document.getElementById('id01');
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Another Example of HTML Login Form:
The code snippet below illustrates the process of building a flexible login form with CSS:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Login Page </title>
<style>
Body {
font-family: Calibri, Helvetica, sans-serif;
background-color: pink;
}
button {
background-color: #4CAF50;
width: 100%;
color: orange;
padding: 15px;
margin: 10px 0px;
border: none;
cursor: pointer;
}
form {
border: 3px solid #f1f1f1;
}
input[type=text], input[type=password] {
width: 100%;
margin: 8px 0;
padding: 12px 20px;
display: inline-block;
border: 2px solid green;
box-sizing: border-box;
}
button:hover {
opacity: 0.7;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
margin: 10px 5px;
}
.container {
padding: 25px;
background-color: lightblue;
}
</style>
</head>
<body>
<center> <h1> Student Login Form </h1> </center>
<form>
<div class="container">
<label>Username : </label>
<input type="text" placeholder="Enter Username" name="username" required>
<label>Password : </label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked"> Remember me
<button type="button" class="cancelbtn"> Cancel</button>
Forgot <a href="#"> password? </a>
</div>
</form>
</body>
</html>
Output: