How to create a registration form with HTML

Registration forms, which help with the collection of data, are essential components of web applications. To create our registration form, we will not use any CSS frameworks like Bootstrap, Tailwind CSS, or the like. Our registration form is going to be built from scratch, and it is also going to be responsive. In this project, we will make use of HTML5 and CSS3 to create and design the registration form.

Creating the HTML Template for the Registration Form

Example

The code below will help us structure the layout of the registration form.

Explanation

Important things to take note of in the index.html file are:

• Line 15, 28: We divide our form into two sections (The Basic Info and Profile section respectively).

• Line 18, 21, 24, 31, 34, 49: We make use of the required attribute, which is available for validation in HTML 5.

• Line 18, 21, 24, 31, 34, 49: We make use of IDs in our form. This will enable us to manipulate the DOM with javascript by making use of querySelector.

Creating the Styling for the Registration Form

To design the index.html file, we need to add some Cascading Style Sheet (CSS).

Example

Explanation

• Line 2: We add the border "box-sizing: border-box;" globally (*). This is because the box-sizing property allows us to include the padding and border in an element's total width and height.

• Line 32: We set the alert class to display as none. In our JavaScript file, we are going to set it to display as block once the registration form has been submitted.

• Line 103: We add a media query at the bottom of the style.css file. This helps our form to be responsive by having a responsive design on mobile view.

In the second part of this tutorial, we will connect our registration form to JavaScript and also link it to the Realtime Database by using Firebase 9.