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:


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

        
      

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.

        
      

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 Validation Of 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.

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.