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.
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 ) :
- Phone Number
- Zip Code
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.
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.
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.
Note: regex are patterns which is used to match character combination in strings.
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.
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.