Sign Up and LogIn Form Using Only HTML and CSS
In this tutorial, we will learn how to create a simple and elegant sign up and login form using only HTML and CSS. We will use basic HTML tags to structure the form elements, and CSS properties to style them. We will also use some CSS pseudo-classes and pseudo-elements to add some interactivity and feedback to the user. The final result will look like this:
[Image of the sign up and login form]
Let’s start by creating the HTML file for the sign up form. We will use a <div> element with a class of “container” to wrap the whole form, and another <div> element with a class of “form” to contain the form elements. Inside the form <div>, we will use a <h1> element to display the title of the form, a <p> element to display a subtitle, and a <form> element to hold the input fields and the submit button. The <form> element will have an action attribute that specifies where the data will be sent when the form is submitted, and a method attribute that specifies how the data will be sent. In this case, we will use a dummy URL for the action attribute, and “POST” for the method attribute.
Inside the <form> element, we will use four <div> elements with a class of “input-group” to group each input field with its corresponding label. Each input field will be created using an <input> element with a type attribute that specifies what kind of data it accepts, a name attribute that identifies the data, a placeholder attribute that displays a hint for the user, and a required attribute that indicates that the field is mandatory. The labels will be created using <label> elements with a for attribute that matches the name attribute of the input field they are associated with. The submit button will be created using an <input> element with a type attribute of “submit” and a value attribute that specifies the text on the button.
The HTML code for the sign up form looks like this:
Now that we have the HTML structure for the sign up form, we can move on to the CSS file to style it. We will use some basic CSS properties to set the font family, color, margin, padding, border, etc. of the elements. We will also use some CSS flexbox properties to align and distribute the elements horizontally and vertically. We will use some CSS variables to store some colors and sizes that we will reuse throughout the code. The CSS code for the sign up form looks like this:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Sign Up and Login Form</title>
<link rel="stylesheet" href=" style.css">
</head>
<body>
<div class="main">
<input type="checkbox" id="chk" aria-hidden="true">
<div class="signup">
<form>
<label for="chk" aria-hidden="true">Sign up</label>
<input type="text" name="txt" placeholder="User name" required="">
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button>Sign up</button>
</form>
</div>
<div class="login">
<form>
<label for="chk" aria-hidden="true">Login</label>
<input type="email" name="email" placeholder="Email" required="">
<input type="password" name="pswd" placeholder="Password" required="">
<button>Login</button>
</form>
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: sans-serif;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}
.main{
width: 350px;
height: 500px;
background: red;
overflow: hidden;
background: url("bg.jpg") no-repeat center/ cover;
border-radius: 10px;
box-shadow: 5px 20px 50px #000;
}
#chk{
display: none;
}
.signup{
position: relative;
width:100%;
height: 100%;
}
label{
color: #fff;
font-size: 2.3em;
justify-content: center;
display: flex;
margin: 60px;
font-weight: bold;
cursor: pointer;
transition: .5s ease-in-out;
}
input{
width: 60%;
height: 20px;
background: #e0dede;
justify-content: center;
display: flex;
margin: 20px auto;
padding: 10px;
border: none;
outline: none;
border-radius: 5px;
}
button{
width: 60%;
height: 40px;
margin: 10px auto;
justify-content: center;
display: block;
color: #fff;
background: #573b8a;
font-size: 1em;
font-weight: bold;
margin-top: 20px;
outline: none;
border: none;
border-radius: 5px;
transition: .2s ease-in;
cursor: pointer;
}
button:hover{
background: #6d44b8;
}
.login{
height: 460px;
background: #eee;
border-radius: 60% / 10%;
transform: translateY(-180px);
transition: .8s ease-in-out;
}
.login label{
color: #573b8a;
transform: scale(.6);
}
#chk:checked ~ .login{
transform: translateY(-500px);
}
#chk:checked ~ .login label{
transform: scale(1);
}
#chk:checked ~ .signup label{
transform: scale(.6);
}
For More Tutorials Please Click Here
