Introduction to Registration Form in HTML

registarion form in html

Introduction to Registration Form in HTML

HTML Forms can be seen everywhere today in all kinds of sites. These HTML forms are used to collect data or information or feedback etc., from the visitors of your site. There are Log In Forms, Registrations Forms, Contact Us Forms, among others.

HTML Forms are used to obtain kinds of user details and inputs, such as name, age, and email address. The forms used in the websites are formed with the help of different special elements known as ‘controls’ in HTML, for example, text areas, radio buttons, checkboxes, submit buttons, etc. While using such forms, users or visitors enter the information or data by modifying these controls, for example, by entering texts or performing selection on specific items, etc. and then by submitting the form. When the form is duly filled, the submitted form adds data, or sends it or redirects it to another page or could also save the details in a database.

How to Create?

HTML Forms are easy to create. As all other HTML elements, to create a form we need an opening form tag (<form>) and a closing form tag (</form>), which in turn will use other attributes like <fieldset> elements, <legend> elements, <input> elements among others to create a fully functional form. of course, we have to use CSS for look and feel.

Following is a basic syntax for an HTML Form.


<form action = "URL" method = "GET or POST">
form elements like submit or reset buttons, input, text area etc.

Example of Registration Form in HTML

Let’s see an example code excerpt for a simple HTML form. The form shown below is a simple Log In Form and has minimal control elements.


<form name="regForm">
<label>Username: <input type="text" id="username"></label>
<label>Password: <input type="password" id="pwd"></label>
<input type="submit" class="login" value="Log In" onclick="validation()" formtarget="_blank">

As shown above, this Log In Form has two text boxes and a submit button labeled as Log In. It’s a simple HTML form that we have created, and the data entered is decided to be printed after the user submits it. The ‘react’ part of an HTML form is handled by our javascript function, which is called with the help of an attribute called ‘onclick’ added to the submit button. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

Related CoursesBootstrap Training (2 Courses, 6+ Projects)XML Training (5 Courses, 6+ Projects)CSS Training (9 Courses, 9+ Projects)


Registration Form - 1

Above is the output we receive when the code is executed. After entering the Username and Password, we submit the form and the following welcome message is displayed.


Registration Form in HTML-1.2
Registration Form in HTML-1.3

The above-discussed form is a simple login form which is accepting only two values, username and password and is submitted. Here we are simply printing the values, but normally in the processing part, one can compare ‘log in’ details with the saved values in a database and show a ‘successful login’ message.

A registration form, however, is something that accepts a variety of data or information, like name, user name, password, date of birth, email address, among others, and this information is then subjected to processing that might include a display of the data on the next page or saving of data into a database and performing a successful registration.

How to Create a Registration HTML Form?

Let’s see the creation of the Registration Form, step by step.

Step 1: Create and add HTML form elements and their associated elements. Here we will create nested form-related or associated elements inside opening and closing Form tags. You can also ‘add action’ attribute to your <form> tag.

Following is the HTML code excerpt for our form.


<div class="container">
<h1>Register Here</h1>
<p>Please fill in the details to create an account with us.</p>
<label for="email"><b>Enter Email</b></label>
<input type="text" placeholder="Enter Email" name="email">
<label for="pwd"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="pwd">
<label for="confirm"><b>Confirm Password</b></label>
<input type="password" placeholder="Confirm Password" name="confirm">
<p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn"><strong>Register</strong></button>
<div class="container signin">
<p>Already have an account? <a href="#">Sign in</a>.</p>


Registration Form in HTML-1.4

Step 2: Add CSS for look and feel. This step is optional since without adding CSS as well, your form will register equally successfully. (Optional)

So for our registration form, I added a bit of the magic of CSS. When the above HTML code is executed, we see the following form displayed in our browser.

Registration Form – Validations

The above-discussed registration form is a simple registration form where there are no rules, that is, validations. Some might say, registration forms are incomplete without validations.

Now validations are a ‘set of rules or instructions that a programmer sets for the user or the visitor of your web site. For example, a username should be of 5 to 8 characters, or Password can not have a special character and so on.

Following is an example of a registration form with some validations. A keyword, ‘required’ used with an element, specifies that that element is necessary to be filled. We will add this keyword to our text field, ‘Email’ and see the result below;


<input type="text" placeholder="Enter Email" name="email" required>


Registration Form in HTML-1.5

Let’s see another example with some more types of form associated elements and attributes.

Registration Form in HTML-1.6

The above-given example is a type of responsive registration form with several elements like drop-down menus, text boxes, submit button. Note that with a little intelligent use of CSS and javascript validations, a simple registration form looks much better. Check when the browser window shrinks; the form readjusts itself according to the window size. Also, the validations added to the form let the user know if he left a blank text box. Check the HTML code excerpt below.

Registration Form in HTML-1.7

Check the CSS used in code:


The screenshot on your right is the result of the above HTML code with the help of CSS. The registration form is different from other forms since they collect data from the user or visitor and use validations to check if the data is correct.


Recommended Articles

This is a guide to the Registration Form in HTML. Here we discuss the introduction and how to create a registration html form along with different examples and its code implementation. You may also have a look at the following articles to learn more –

  1. HTML Picture Tag
  2. HTML Umlaute
  3. HTML Schriftart
  4. HTML Search Bar

Leave a Comment

Your email address will not be published. Required fields are marked *