Creating a responsive login form with HTML, CSS, and JavaScript
A login form is one of the most important components of any website or application. It allows users to authenticate themselves and gain access to the services or content that they need. However, not all login forms are created equal. A good login form should not only be secure and functional but also visually appealing and responsive. In this tutorial, we will walk you through the steps to create a responsive login form using HTML, CSS, and JavaScript.
Step 1: Setting up the HTML Structure
The first step in creating a responsive login form is to set up the HTML structure. We will use a simple HTML form with two input fields: one for the username and one for the password. We will also add a submit button to allow users to submit their login credentials.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Login Form</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h2>Login</h2>
<form>
<div class="user-box">
<input type="text" name="username" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="password" required="">
<label>Password</label>
</div>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>
We have added a meta tag to set the viewport width to the device width and a link to our CSS file. The login-box class wraps our form and includes a heading that says "Login". We have used two div elements with the user-box class to wrap our input fields and labels. Finally, we have added an a element with a submit button and four span elements to create a simple animated effect when the button is clicked.
Step 2: Styling the Login Form with CSS
The next step is to style our login form using CSS. We will start by styling the login-box class and adding a background color, border-radius, and padding.
.login-box {
width: 320px;
background: #fff;
color: #333;
border-radius: 5px;
padding: 30px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}
Next, we will style the h2 element and add some margin to the top and bottom.
.login-box h2 {
margin: 0 0 30px;
padding: 0;
text-align: center;
font-size: 22px;
}
We will then style the form element and add some margin to the top and bottom.
.login-box form {
width: 100%;
margin: 0;
padding: 0;
}
Next, we will style the user-box class and add some margin to the bottom.
.user-box {
position: relative;
margin-bottom: 30px;
}
We will then style the input element and add some padding, border-radius, and a border.
.user-box input {
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #333;
border: none;
border-bottom: 2px solid #ccc;
outline: none;
background: transparent;
}
Next, we will style the label element and add some absolute positioning, a transition effect, and a color change when the input field is focused.
.user-box label {
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #ccc;
transition: all 0.3s ease-out;
pointer-events: none;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
top: -20px;
left: 0;
color: #333;
font-size: 12px;
font-weight: bold;
}
Finally, we will style the a element that contains our submit button and add some padding, a background color, and a hover effect.
.login-box a {
display: block;
width: 100%;
padding: 10px 0;
margin: 30px 0 0;
text-align: center;
color: #fff;
background: #333;
border: none;
border-radius: 5px;
outline: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.login-box a:hover {
background: #666;
}
Step 3: Adding JavaScript Functionality
The final step is to add some JavaScript functionality to our login form. We will use JavaScript to toggle a class on our login-box element when the submit button is clicked. This will trigger a CSS transition effect that will animate the login form and make it disappear.
const loginBox = document.querySelector(".login-box a");
const submitBtn = document.querySelector(".login-box a");
submitBtn.addEventListener("click", () => {
loginBox.classList.add("active");
});
We have used querySelector to select our submitBtn and loginBox elements, and added an event listener to our submitBtn that triggers a function when it is clicked. The function adds the active class to our loginBox element, which triggers a CSS transition effect that will animate the login form and make it disappear.
Conclusion
In this tutorial, we have shown you how to create a responsive login form using HTML, CSS, and JavaScript. We started by setting up the HTML structure and then styled our login form using CSS. Finally, we added some JavaScript functionality to our form that allows users to submit their login credentials and triggers a CSS transition effect that makes the login form disappear. With these techniques, you can create a login form that is not only secure and functional but also visually appealing and responsive.