Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a register form with CSS?
A registration form on a web page can include your name, email-id, and the password you want to set. The placeholder is also set for each input field using the placeholder attribute. We can easily create this with CSS. All these fields in a from goes inside the <form> element with a button to submit the form. Also, a sign in button is also provided for the users who already registered before. Such users can directly click the sign in button. Let us see how to create a register form on a web page.
Create a form
To create a form, use the <form> element. We have set four fields, name, email, password, and repeat password −
<form>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
<div class="signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
Set the buttons
We have set the register and sign in buttons using the <button> element −
<button type="submit" class="registerbtn">Register</button>
<div class="signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
Style the form
The form is styled like this. The maximum width of the form is set using the max-width property. Set the left margin using the margin-left property −
form {
padding: 16px;
max-width: 800px;
margin-left: 20%;
background-color: rgb(255, 254, 195);
}
Position the input field
The input text and password fields are styled like this. The width for the input field is set 100%. To position the input type fields inside the form, the display property is set to inline-block −
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
The register button
The button to submit the registration form is the register button. Do not forget to set the cursor property to pointer so that it looks clickable. The width is set to 100% −
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
Responsive form
Media Queries are used to set the properties when the web browser is resized −
@media (max-width: 800px) {
form {
width: 100%;
margin-left: 0px;
}
}
Example
The following is the code to create a register form with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
h1{
text-align: center;
}
* {
box-sizing: border-box;
}
form {
padding: 16px;
max-width: 800px;
margin-left: 20%;
background-color: rgb(255, 254, 195);
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover {
opacity: 1;
}
a {
color: dodgerblue;
text-decoration: none;
}
.signin {
background-color: #f1f1f1;
text-align: center;
}
@media (max-width: 800px) {
form {
width: 100%;
margin-left: 0px;
}
}
</style>
</head>
<body>
<h1>Registration Form Example</h1>
<form>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
<div class="signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
</body>
</html>
1K+ Views
