LAST UPDATED: AUGUST 16, 2021
How to create a register form with CSS?
The register form is most common on the webpage. When you visit any website for the first time, it will pop up a message to register yourself to the website so that you can get the latest updates of the product or services. Here we will create a registration form with CSS.
Creating a register form
A register form consists of the user name , email, and password field. We can create it using <input> field. For password input field us type="password" attribute. It also has terms and privacy link and a register <button>. The form element can be customized using properties like background-color, color, padding, box-sizing, etc.
Example: Creating a register form with CSS
Here in this example, we have created a simple registration form with CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
form {
border: 1px solid gray; /* border to the form */
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 16px 16px;
margin: 10px 0;
display: inline-block;
border: 1px solid #cccccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #000544;
color: white;
padding: 16px 15px;
margin: 5px 0;
border: none;
cursor: pointer;
margin-left: 16px;
}
/* Add a hover effect for buttons */
button:hover {
opacity: 0.5;
}
/* Extra style for the cancel button (red) */
.cancelbtn {
width: auto;
color: black;
padding: 10px 15px;
background-color: red;
margin-left: 16px;
}
.sign-in {
float: right;
padding-top: 16px;
padding-right:10px;
}
</style>
</head>
<body>
<h2> Register</h2>
<form>
<div class="container">
<label><b> Username</b></label>
<input type="text" placeholder="Enter username" name="username">
<label> <b> Enter Password </b></label>
<input type="password" placeholder="EnterPassword" name="password">
<label> <b> Confirm Password </b></label>
<input type="password" placeholder="Confirm Password" name="password">
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container" style="background-color:#cccccc; margin-top: 50px;">
<button type="button" class="cancelbtn">Cancel</button>
<span class="sign-in">Already have a account? <a href="#">sign in</a></span>
</div>
</form>
</body>
</html>
Output
Here is the output of the above example.
Example: Creating a responsive register form
We can also create a responsive form using @media rule.
Conclusion
In this tutorial, we have learned to create a registration form with CSS. We can customize it like aligning, spacing, and adding color to elements with CSS. We can also add a responsive design to it.
