In this blog post you'll learn how to create a signup and login form with floating placeholder with HTML and CSS in this easy step-by-step guide. This tutorial is perfect for beginners who want to learn how to create interactive web pages. This is only a design, there is nothing in the backend, and there is no or very basic form validation added here in this form. You can see the designs in below image.
- H2 tag for title.
- form tag.
- Input fields with required attribute, so that form will not submit without values in input fields.
- Checkbox to show and hide password.
- Button tag.
- Anchor tag for link to redirect to login form and signup form.
Video Tutorial on Sign Up and Login Form:
SignUp Form.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
Below is the full commented code for Signup form
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Form</title>
<link rel="stylesheet" href="signup.css">
</head>
<body>
<div class="container">
<div class="box">
<!-- title for form -->
<h2>Signup</h2>
<form action="#">
<!-- input field for username -->
<div class="input_box">
<input type="text" class="name" required>
<label>Username</label>
</div>
<!-- input field for password with checkbox-->
<div class="input_box">
<input type="text" class="password" required>
<label>Password</label>
<div class="password_checkbox"><input type="checkbox"><p>Show Password</p></div>
</div>
<!-- input field for email -->
<div class="input_box">
<input type="text" class="email" required>
<label>Email</label>
</div>
<!-- Submit button for signup form -->
<button class="signup_button" type="submit">Create Account</button>
<!-- Ḷink for signup form -->
<div class="login_link"><a href="login.html">Already have an Account ?</a></div>
</form>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(45deg , rgb(135 129 255) , rgb(255 110 110));
position: relative;
}
.container .box{
position: absolute;
width: 350px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #fff;
padding: 25px 25px 45px 25px;
border-radius: 20px;
}
h2{
text-align: center;
font-size: 44px;
margin-bottom: 30px;
position: relative;
}
h2::before{
position: absolute;
content: '';
width: 55px;
height: 5px;
border-radius: 50px;
background: linear-gradient(45deg , #875cff , #ff66d7);
bottom: -8px;
}
.box .input_box{
width: 100%;
position: relative;
}
.box .input_box input[type="text"]{
width: 100%;
font-size: 26px;
margin: 16px 0px;
outline: none;
border-width: 0px 0px 2px 0px;
border-color: #cd7acd;
}
.box .input_box label{
position: absolute;
left: 0;
top: 12px;
font-size: 26px;
color: #0000009e;
pointer-events: none;
transition: 0.2s;
}
.box .input_box input:focus + label,
.box .input_box input:valid + label{
top: -7px;
font-size: 18px;
color: blue;
}
.box .input_box .password_checkbox{
width: 100%;
font-size: 18px;
display: flex;
justify-content: flex-end;
}
.box .input_box .password_checkbox p{
margin-left: 8px;
}
.box .signup_button{
width: 100%;
background: linear-gradient(45deg , #875cff , #ff66d7);
border: none;
padding: 10px 16px;
margin-top: 30px;
font-size: 30px;
color: #fff;
cursor: pointer;
border-radius: 50px;
transition: 0.2s;
}
.box .signup_button:active{
transform: scale3d(0.9,0.9,0.9);
}
.box .login_link{
font-size: 20px;
margin-top: 30px;
width: 100%;
text-align: center;
}
.box .login_link a{
color: #000;
text-decoration: none;
}
.box .login_link a:hover{
text-decoration: underline;
text-underline-position: under;
}
So that's it a simple signup form design is ready using HTML & CSS. The password show and hide functionality is not added in this form. But you can easily learn how to show and hide password based on checkbox state using JavaScript. You can change input field type to password or text based to checkbox state (checked or unchecked) using simple JavaScript.
Login Form
Code for login form:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="container">
<div class="box">
<!-- title for login form -->
<h2>Login</h2>
<!-- form -->
<form action="#">
<!-- input field for username -->
<div class="input_box">
<input type="text" class="name" required>
<label>Username</label>
</div>
<!-- input field for password with checkbox -->
<div class="input_box">
<input type="text" class="password" required>
<label>Password</label>
<div class="password_checkbox"><input type="checkbox"><p>Show Password</p></div>
</div>
<!-- link for forgot passowrd -->
<div class="forgot_password"><a href="#">Forgot Password ?</a></div>
<!-- Login form submit button -->
<button class="login_button" type="submit">Login</button>
<!-- link for signup form -->
<div class="signup_link"><a href="signup.html">Don't have an Account ?</a></div>
</form>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(45deg , rgb(135 129 255) , rgb(255 110 110));
position: relative;
}
.container .box{
position: absolute;
width: 350px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #fff;
padding: 25px 25px 45px 25px;
border-radius: 20px;
}
h2{
text-align: center;
font-size: 44px;
margin-bottom: 30px;
position: relative;
}
h2::before{
position: absolute;
content: '';
width: 55px;
height: 5px;
border-radius: 50px;
background: linear-gradient(45deg , #875cff , #ff66d7);
bottom: -8px;
}
.box .input_box{
width: 100%;
position: relative;
}
.box .input_box input[type="text"]{
width: 100%;
font-size: 26px;
margin: 16px 0px;
outline: none;
border-width: 0px 0px 2px 0px;
border-color: #cd7acd;
}
.box .input_box label{
position: absolute;
left: 0;
top: 12px;
font-size: 26px;
color: #0000009e;
pointer-events: none;
transition: 0.2s;
}
.box .input_box input:focus + label,
.box .input_box input:valid + label{
top: -7px;
font-size: 18px;
color: blue;
}
.box .input_box .password_checkbox{
width: 100%;
font-size: 18px;
display: flex;
justify-content: flex-end;
}
.box .input_box .password_checkbox p{
margin-left: 8px;
}
.box .forgot_password{
margin-top: 20px;
display: inline-block;
transition: 0.2s;
}
.box .forgot_password a{
color: #000;
font-size: 18px;
text-decoration: none;
}
.box .forgot_password:hover{
text-decoration: underline;
text-underline-position: under;
}
.box .login_button{
width: 100%;
background: linear-gradient(45deg , #875cff , #ff66d7);
border: none;
padding: 10px 16px;
margin-top: 30px;
font-size: 30px;
color: #fff;
cursor: pointer;
border-radius: 50px;
transition: 0.2s;
}
.box .login_button:active{
transform: scale3d(0.9,0.9,0.9);
}
.box .signup_link{
font-size: 20px;
margin-top: 30px;
width: 100%;
text-align: center;
}
.box .signup_link a{
color: #000;
text-decoration: none;
}
.box .signup_link a:hover{
text-decoration: underline;
text-underline-position: under;
}
Output:
You may like:
- Create animated login & registration form using HTML CSS and JavaScript.
- Sliding Login & Registration form using HTML, CSS & JavaScript.
- Login form using PHP and MySQL.
- Registration form using PHP and MySQL.
- How to show and hide password on a click of image.
That's it simple design of signup & login form is ready using html & css. If you have any question or suggestion you can write in comment section.
Share your thoughts.