Responsive Login Form using only HTML & CSS
by CodingGujarat - October 4,2023
Hello friends, Today in this blog I’m going to create Responsive Login Form using only HTML & CSS. Prior I have shared a responsive navigation menu and presently I’m planning to create a login form.
Simply, A login form is a form used to validate the user before giving entry to a particular page. Login form includes two input fields, one is used for an email address, phone, and username and another one is used for the password.
In this program [Responsive Login Form], at first, on the webpage, there is a login form with a login title, two input fields with icons used for email and password, a login button, and two hyperlinks for forget password and signup [to making new account]. This form is created using only HTML & CSS and I have not add JavaScript function in this program[ login form] so when you filled up your login details [emair and password] and submit the form, it won’t submit your details anywhere. If you are feeling difficult to understand then you can watch a full video tutorial on this program[Animated Login Form with Icons].
Animated Login Form with Icons [Source Codes]
To create this program [Responsive Login Form], First, you would like to create two files one is an HTML file and another is the CSS file. After creating these files, just copy the following codes and paste them into your files. You can also download the source code files of this program [Responsive Login Form] from the given “Download Button”.
- File Structure of the Project
- Creating Login & Registration From
- 1. File Structure of the Project
- 2. Creating Button Click Animation
To build this Login & Registration Form, we’ll be using two separate files – index.html and style.css. These files will contain the HTML, CSS, and JavaScript code respectively needed to bring the Login & Registration Form. Let’s get started by setting up these files and adding the basic code. Once you have made these files, you can proceed to the next step of creating your Button Click Animation.
In the second step, we will design the user interface for our Login & Registration Form and style it using HTML and CSS. Once the user interface is complete, we will use JavaScript to animate these two forms on click.
In the index.html file, add the following HTML and JavaScript code to create the basic structure of the animated button.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form | Letscodeweb</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="title"><span>Login Form</span></div>
<form action="#">
<div class="row">
<i class="fas fa-user"></i>
<input type="text" placeholder="Email or Phone" required>
</div>
<div class="row">
<i class="fas fa-lock"></i>
<input type="password" placeholder="Password" required>
</div>
<div class="pass"><a href="#">Forgot password?</a></div>
<div class="row button">
<input type="submit" value="Login">
</div>
<div class="signup-link">Not a member? <a href="#">Signup now</a></div>
</form>
</div>
</div>
</body>
</html>
In the style.css file, add the following CSS code to add styles and make the button and its bubbles. If you want, you can change the color, background, font, and size of the button in this code.
/* Coding by Letscodeweb */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #1abc9c;
overflow: hidden;
}
::selection {
background: rgba(26, 188, 156, 0.3);
}
.container {
max-width: 440px;
padding: 0 20px;
margin: 170px auto;
}
.wrapper {
width: 100%;
background: #fff;
border-radius: 5px;
box-shadow: 0px 4px 10px 1px rgba(0, 0, 0, 0.1);
}
.wrapper .title {
height: 90px;
background: #16a085;
border-radius: 5px 5px 0 0;
color: #fff;
font-size: 30px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form {
padding: 30px 25px 25px 25px;
}
.wrapper form .row {
height: 45px;
margin-bottom: 15px;
position: relative;
}
.wrapper form .row input {
height: 100%;
width: 100%;
outline: none;
padding-left: 60px;
border-radius: 5px;
border: 1px solid lightgrey;
font-size: 16px;
transition: all 0.3s ease;
}
form .row input:focus {
border-color: #16a085;
box-shadow: inset 0px 0px 2px 2px rgba(26, 188, 156, 0.25);
}
form .row input::placeholder {
color: #999;
}
.wrapper form .row i {
position: absolute;
width: 47px;
height: 100%;
color: #fff;
font-size: 18px;
background: #16a085;
border: 1px solid #16a085;
border-radius: 5px 0 0 5px;
display: flex;
align-items: center;
justify-content: center;
}
.wrapper form .pass {
margin: -8px 0 20px 0;
}
.wrapper form .pass a {
color: #16a085;
font-size: 17px;
text-decoration: none;
}
.wrapper form .pass a:hover {
text-decoration: underline;
}
.wrapper form .button input {
color: #fff;
font-size: 20px;
font-weight: 500;
padding-left: 0px;
background: #16a085;
border: 1px solid #16a085;
cursor: pointer;
}
form .button input:hover {
background: #12876f;
}
.wrapper form .signup-link {
text-align: center;
margin-top: 20px;
font-size: 17px;
}
.wrapper form .signup-link a {
color: #16a085;
text-decoration: none;
}
form .signup-link a:hover {
text-decoration: underline;
}
Conclusion and Final Words
By following the steps you have successfully created a Login & Registration Form. There are lots of Login and Signup Forms you can find on this website to enhance your skills in creating forms. If you found this blog helpful, please consider sharing it with others. Your support helps us continue creating valuable content and resources for the development community. Thank you for your support!
If you face any difficulties while creating your Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Signup Form for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
Featured Post
Responsive E-Commerce Website Using HTML CSS And JavaScript
CodingGujarat - November 17,2024
Most Popular
Recent Posts
-
Image Slider in HTML CSS and JavaScript
CodingGujarat - October 4,2023
-
Facebook Login Page Using HTML & CSS
CodingGujarat - October 10,2023
-
Amazon Website clone in HTML & CSS
CodingGujarat - November 4,2023
-
Custom Captcha Generator in HTML CSS and JS
CodingGujarat - October 24,2023
