Tutorials Tonight's Logo
Follow Us

HTML code for registration form with validation

The registration forms helps us to register users details on online portals like, for subscription, tickets booking, slot booking, sending and receving data from data base, etc.

This article disusses about creating beautiful registration form with HTML, CSS and validate it with Javascript in detail and also provide full code for it.

html code for registration form

HTML Registration Form

To begin with registration form first you need to decide what kind of information you want from user. For different uses, form sections could be different but the basic idea behing form designing is same.

For this section we have taken following detail into consideration ( you can add or remove parts as your choice ):

Here is what our registration form would look like:

registration form in html and javascript

HTML Code For Registration Form

To create form in html <form> tag is used. Form consists for many different kinds of inputs, to create inputs <input> tag is used. The <input> has attribute type which defines what is type of input you want, it may be text, email, password, number, date, file, etc.

Each input in a form has a label which defines purpose of input element.

So basically a form consists of different types of input with their label and a submit button.

Let's first look at HTML code for the registration form and then we will explain the code

Registration form HTML codes

<div class="container">
  <h1>HTML registration form with varification</h1>
  <form name="registration" class="registartion-form" onsubmit="return formValidation()">
        <td><label for="name">Name:</label></td>
        <td><input type="text" name="name" id="name" placeholder="your name"></td>
        <td><label for="email">Email:</label></td>
        <td><input type="text" name="email" id="email" placeholder="your email"></td>
        <td><label for="password">Password:</label></td>
        <td><input type="password" name="password" id="password"></td>
        <td><label for="phoneNumber">Phone Number:</label></td>
        <td><input type="number" name="phoneNumber" id="phoneNumber"></td>
        <td><label for="gender">Gender:</label></td>
        <td>Male: <input type="radio" name="gender" value="male">
          Female: <input type="radio" name="gender" value="female">
          Other: <input type="radio" name="gender" value="other"></td>
        <td><label for="language">language</label></td>
          <select name="language" id="language">
            <option value="">Select language</option>
            <option value="English">English</option>
            <option value="Spanish">Spanish</option>
            <option value="Hindi">Hindi</option>
            <option value="Arabic">Arabic</option>
            <option value="Russian">Russian</option>
        <td><label for="zipcode">Zip Code:</label></td>
        <td><input type="number" name="zipcode" id="zipcode"></td>
        <td><label for="about">About:</label></td>
        <td><textarea name="about" id="about" placeholder="Write about yourself..."></textarea></td>
        <td colspan="2"><input type="submit" class="submit" value="Register" /></td>

You can see html code for registration form above and notice we have used <table> inside the form which is wrapping our label and input elements in form of rows and columns.

You can directly use inputs with their labels without wrapping it in a table but that form elements will not be aligned in same verticle line.

Let's look at output of above code to understand how it's elements are vertically aligned.

html output of registration form

As you can see in the above image all the labels are of different sizes but their input starts with same verticle line which improves look of the registartion form.

CSS Code For Registration Form

HTML defines structure of form, but its CSS which make registartion form look beautiful.

We generally work with CSS classes when talking about CSS. In the HTML code you can see we have set .registartion-form class to the form to style it.

Let's see CSS code for the form and understand how you can style it.

* {
  margin: 0

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  background-color: #6699cc;

.container h1 {
  color: white;
  font-family: sans-serif;
  margin: 20px;

.registartion-form {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 600px;
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-family: sans-serif;
  background-color: #154a68;
  padding: 20px;

.registartion-form input,
.registartion-form select,
.registartion-form textarea {
  border: none;
  padding: 5px;
  margin-top: 10px;
  font-family: sans-serif;

.registartion-form input:focus,
.registartion-form textarea:focus {
  box-shadow: 3px 3px 10px rgb(228, 228, 228), -3px -3px 10px rgb(224, 224, 224);

.registartion-form .submit {
  width: 100%;
  padding: 8px 0;
  font-size: 20px;
  color: rgb(44, 44, 44);
  background-color: #ffffff;
  border-radius: 5px;

.registartion-form .submit:hover {
  box-shadow: 3px 3px 6px rgb(255, 214, 176);

As you can see in above code, the form elements is aligned to center using CSS flexbox applied on class .registration-form class and other necessary styles are defined like, width, background-color, font style, color, etc.

Submit button is give colspan="2" so that it may cover full width of registartion form. Submit button has class .submit which adds few CSS styles to it like, border-radius, font-size, background-color, etc.

You can see codes for :hover and :focus these are used to change certain CSS style of element on different actions on the element.

Javascript Code For Registration Form

You can varifying wether the data given by user in registartion form is valid or not using javascript.

As soon as register button (submit button) is clicked, all the data is submitted but you can stop submittion and alert a message if there is something wrong with submitted data.

For validation you can use regex (regular expression) with javascript.

Note: regex are patterns which is used to match character combination in strings.

Let's first look at the javascript varification code then we will look at the code in detail.

// Select all input elements for varification
const name = document.getElementById("name");
const email = document.getElementById("email");
const password = document.getElementById("password");
const phoneNumber = document.getElementById("phoneNumber");
const gender = document.registration;
const language = document.getElementById("language");
const zipcode = document.getElementById("zipcode");

// function for form varification
function formValidation() {
  // checking name length
  if (name.value.length < 2 || name.value.length > 20) {
    alert("Name length should be more than 2 and less than 21");
    return false;
  // checking email
  if (email.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)) {
    alert("Please enter a valid email!");
    return false;
  // checking password
  if (!password.value.match(/^.{5,15}$/)) {
    alert("Password length must be between 5-15 characters!");
    return false;
  // checking phone number
  if (!phoneNumber.value.match(/^[1-9][0-9]{9}$/)) {
    alert("Phone number must be 10 characters long number and first digit can't be 0!");
    return false;
  // checking gender
  if (gender.gender.value === "") {
    alert("Please select your gender!");
    return false;
  // checking language
  if (language.value === "") {
    alert("Please select your language!")
    return false;
  // checking zip code
  if (!zipcode.value.match(/^[0-9]{6}$/)) {
    alert("Zip code must be 6 characters long number!");
    return false;
  return true;

From the above example you can see there is a javascript function formValidation which validates our form.

This function runs whenever user submits the form, if there is any input value that doesn't satisfy some constrain it alerts a message and stops submittion of form by returning false.

For name it checks weather the length of name given by user is between 3 and 21 or not. If not then it alerts a message, focus on name input and returns a false which stops form submittion.

When checking email it matches user input by regex string /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/. By using javascript match() function we can check a string's validation by passing regex as an argument. If string does not satisfy regex then it return false and stop form submittion.

All rest varification is done in similar manner.

More Learning

Want to learn more about programming and web development? We have a few recommendations for you.

Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.