How To Create a Register Form

Do you know How To Create a Register Form? Tody in this tech tutorial we will teach you HTML registration form bootstrap. At present registration, Form is using for a different purpose. This tutorial is for beginner web developer and designer. Especially, registration form used to collect information like student info, job application, course registration, customer registration, etc. So, if you are going to create a bootstrap responsive registration form using the below code.

Also, you will find registration form template HTML on online. If you want to download free visit the provided links we share here. In this section, we are talking about bootstrap responsive registration form with validation.

Firstly, see the Html form design examples with code. Then try it yourself on your localhost.  If it is working properly on your machine then upload it on live server. By following our tutorial you will learn about how to create a custom form in WordPress.

How To Create a Register Form

To Create a Register Form you have to follow the below step.

Step 1) Add HTML:

Use a <form> element to process the input. You can learn more about this in our PHP tutorial. Then add inputs (with a matching label) for each field:

<form action=”action_page.php”>
<div class=”container”>
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>

<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>

<div class=”container signin”>
<p>Already have an account? <a href=”#”>Sign in</a>.</p>
</div>
</form>

Step 2) Add CSS:

Example
* {box-sizing: border-box}

/* Add padding to containers */
.container {
padding: 16px;
}

/* Full-width input fields */
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;
}

/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for the submit/register button */
.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;
}

/* Add a blue text color to links */
a {
color: dodgerblue;
}

/* Set a grey background color and center the text of the “sign in” section */
.signin {
background-color: #f1f1f1;
text-align: center;
}

You May Also Like