Responsive login form using HTML and CSS


Posted on February 11, 2021, at 8:00 PM [IST], created by Admin, Website: codewithbishal.com



Responsive login form:

What is a responsive login form?

=> Our awesome, responsive login form gives visitors attractive, and responsive login forms. So that you and your visitors can easily log in to your site.

How can I use this responsive login form?

=> You can easily copy the code or can download the code from our website and can simply paste it anywhere to get the responsive login form.

Do I need to know how to code?

=> No, you don't need to know how to code you can simply copy code from here and paste it wherever you want your responsive login form. Also, you can try it on our website using the "TRY IT NOW" option or can download the code using the "Download" button below.

Is it safe to use the responsive login form in HTML?

=> Yes, it's completely safe to use the responsive login form.

What are the advantages of the responsive login form?

=> Responsive login form is a very good way for creating a login form that is mobile-friendly.

Login form

How can I download the source code of the responsive login form?

=> Scroll the page to the bottom there you will find our download button to download the code of our responsive login form.

Overview of the Blog :

=> In this blog, you can learn, how to make a responsive login form using HTML, CSS By Code With Bishal. Just Copy The Code From Here And Paste It Into Your Website or portfolio. To Preview scroll the page to the beginning. If you are having any problem viewing the code just refresh the page. The responsive login form is a lightweight and easy-to-use HTML, CSS code that creates a responsive login form for you. In this blog, there are fifth sections on the webpage, in the first section, you can get a preview of the blog, in the second section there are few FAQs and an overview of the blog, in the third section there are few more coding blogs you might like, in the fourth section you can Try our responsive login form using the "TRY IT NOW" button, after that, you can copy the code and paste it [that's the fifth section] and from the last section You can download the source code.


You might like this :

How to create responsive column cards Filter images using JavaScript
How to create accordion using JavaScript How to create movie ticket using CSS Glowing Button using CSS




Login form

Step by step guide of creating an responsive login form:

So this time I have something interesting you can put this where your clients or visitors will land or landing page and it will create a login form for your visitors (This is optimized for desktop as well as for mobile). The first step is to add the broiler plate of HTML, you can add this from below.

Step 1

=> Add the Broiler plate of HTML
              
<!DOCTYPE html>
<html>
<head>
<title>responsive login form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
</body>
</html>

After adding the broiler plate of HTML add the below code to to create some DIVs.


<div class="wrapper">
<div class="form-title">
<div class="form-field">
<div class="link">
</div>
</div>
</div>
</div>

After adding the DIVs now add the label and the input fields. Make sure to put them inside "form-field"


<label for="email">Email Address</label>
<input type="text" id="email" required>
<label>Password</label>
<input type="password" id="password" required>
<input type="submit" value="Login" title="Login Now">

Now, let's add the CSS or style to our login form and this will do the styling of our form. So our second step is to add the CSS file, you can copy the code from below

Step 2)

=> Add CSS (External or Internal)

If you are using External CSS then create a file

                
                    style.css
                

And add code :

                
<link rel="stylesheet" href="style.css">

If you want to use Internal CSS than add

                <style>   </style>

tag Between

                <head>   </head>
then add the CSS code between style tag or inside
style.css
to reset some values and to set font family.


@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Akaya Telivigala', sans-serif;
}

The below code will do the styling of the form.


.wrapper{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 370px;
border-radius: 20px;
box-shadow: 1px 1px 15px 15px rgba(0,0,0,0.5);
}
.wrapper > .form-title{
font-size: 35px;
font-weight: 600;
text-align: center;
line-height: 100px;
color:white;
user-select: none;
border-radius: 15px 15px 0 0;
background: #12c2e9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
.wrapper > form{
padding: 20px 40px 60px 30px;
}
.wrapper > form > .form-field{
height: 50px;
width: 100%;
margin-top: 20px;
position: relative;
}
.wrapper > form .form-field > input{
height: 100%;
width: 100%;
outline: none;
font-size: 20px;
padding-left: 20px;
border: 1px solid rgb(110, 110, 110);
border-radius: 25px;
}
.wrapper > form .form-field > input:focus{
border-color: #1030d3;
}
.wrapper > form > .form-field label{
position: absolute;
top: 50%;
left: 20px;
color: #6d6d6d;
font-weight: 400;
font-size: 20px;
pointer-events: none;
transform: translateY(-50%);
}
form > .form-field > input:focus ~ label{
top: 0%;
font-size: 20px;
border-color: #052fff;
}
form > .form-field > input[type="submit"]{
color: #fff;
border: none;
padding-left: 0;
font-size: 20px;
font-weight: 500;
cursor: pointer;
background: #12c2e9;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9);
}
form > .form-field > input[type="submit"]:hover{
background: #12c2e9bd;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
background: linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd);
transform: scale(1.11);
}
form > .link{
margin-top: 25px;
text-align: center;
}
form > .link a{
color: #132ecc;
}

We have successfully added style to our login form. If you are having any problem copy the code from below.
Login form

OR copy the code from below


Step 1) Add your HTML Code -

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>Login form - Code With Bishal</title>
</head>
<!-- created by Code With Bishal - www.codewithbishal.com -->
<body>
<div class="wrapper"> <div class="form-title">Login Form</div> <form> <div class="form-field"> <label for="email">Email Address</label> <input type="text" id="email" required> </div> <div class="form-field"> <label>Password</label> <input type="password" id="password" required> </div> <div class="form-field"> <input type="submit" value="Login" title="Login Now"> </div> <div class="link">Not a member? <a href="#" title="Sign up now">Signup now</a></div> </form> </div> </body>
</html>

Step 2) Add your CSS Code -

CSS Code
              
<style>
@import url('https://fonts.googleapis.com/css2?family=Akaya+Telivigala&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Akaya Telivigala', sans-serif; } .wrapper{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 370px; border-radius: 20px; box-shadow: 1px 1px 15px 15px rgba(0,0,0,0.5); } .wrapper > .form-title{ font-size: 35px; font-weight: 600; text-align: center; line-height: 100px; color:white; user-select: none; border-radius: 15px 15px 0 0; background: #12c2e9; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9); background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); } .wrapper > form{ padding: 20px 40px 60px 30px; } .wrapper > form > .form-field{ height: 50px; width: 100%; margin-top: 20px; position: relative; } .wrapper > form .form-field > input{ height: 100%; width: 100%; outline: none; font-size: 20px; padding-left: 20px; border: 1px solid rgb(110, 110, 110); border-radius: 25px; } .wrapper > form .form-field > input:focus{ border-color: #1030d3; } .wrapper > form > .form-field label{ position: absolute; top: 50%; left: 20px; color: #6d6d6d; font-weight: 400; font-size: 20px; pointer-events: none; transform: translateY(-50%); } form > .form-field > input:focus ~ label{ top: 0%; font-size: 20px; border-color: #052fff; } form > .form-field > input[type="submit"]{ color: #fff; border: none; padding-left: 0; font-size: 20px; font-weight: 500; cursor: pointer; background: #12c2e9; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #f64f59, #c471ed, #12c2e9); background: linear-gradient(to right, #f64f59, #c471ed, #12c2e9); } form > .form-field > input[type="submit"]:hover{ background: #12c2e9bd; /* fallback for old browsers */ background: -webkit-linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd); background: linear-gradient(to right, #f64f5abb, #c471edb2, #12c2e9bd); transform: scale(1.11); } form > .link{ margin-top: 25px; text-align: center; } form > .link a{ color: #132ecc; } </style>





Leave a Comment:

Search