How to Create a Registration Form in HTML

Introduction

The HTML registration form is part of the user interface and consists of input fields used to collect personal data, including gender, contact information, email address, and password. The fields are presented and validated using CSS by default.

Approach

The registration form on the HTML page involves first name, last name, email address, password, and other input fields.
The use of visual compositions of layout, spacing, colors, borders, and alignment of elements is done better by applying CSS styles to each one of them.
It brings a constant display with a flexbox that centers the form both horizontally and vertically inside the viewport.
As a means to make sure that all required fields are completed before submitting the form, the required property has been applied to input fields.
Upon submission, the form data is sent to the server with a clickable button that is hooked up to CSS.

HTML Structure for the Registration Page

To get a better picture, we shall outline the process in the sections below.

To start, we will make an html file that will use this basic HTML code as a template. <head> tag opens up, and immediately inside of it, the <title> tag is located. When the title of the present web display is represented in the tab's name, the information kept in the <title> tag will appear.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register</title> 
  </head>	
  <body></body>
</html>

Let us now add a Top of Form<form> tag inside the <body> element. Bottom of Form We will apply the <form> tag to include our form. Form tags in HTML ensure that any form may be built using them. The action and method of the form are the very primary desirable properties that a form tag has alongside the other attributes. To let the system know where the data should be taken after submission, the action attribute is specified, and we use the URL as a form. Further, to the contrary, the method leftward of the attribute signifies HTTP methods such as GET and POST that should be used to deliver the form data. We are going to insert 2 div tags within the form to standardize the fields. Here is where the title, description, inputs, and the submit button can be found in one division.

This is how the code appears inside the tag:

<form>
      <div></div>
      <div></div>
</form>

In the following steps, we will operate inside the first div tag. First, let's give our form a title and a description. Write "Register" as the heading for our registration form in a <h1> tag. Next, write "Kindly fill in this form to register" as the description of our form in a <p> tag. <p> tags often are used to create long paragraphs or text descriptions while <h1>, <h2>, <h3>, and <h4> are designed as title or heading tags.

<form>
      <div>
        <h1>Register</h1>
        <p>Fill out the form to register.</p>
      </div>
      <div></div>
</form>

Output

How to Create a Registration Form in HTML

Let us now include the fields for the password, email address, and username, and another field for typing the password again. These are added in the form of two input tags and labels. The user's information is inserted with <input> tags, while the input fields are labeled with <label> tag. An attribute of that label tag gives the nature of the related entity. Strong texts are bolded now by using the <b> tag within the <label> tag. The primary attributes of the input tag are five.

The type is a representation of the type of data entered into the input field. It may consist of characters, text, email, passwords, etc. For instance, the user won't be able to enter text into the input box if the type is set to a number.
placeholder provides the user with a quick indication of the type of data that is expected in the input field. As soon as the user begins entering data, it disappears.
After the form is submitted, the entity entered in the input field is referred to by its name.
id, as the name implies, it acts as the element's unique identifier.
required attribute is a boolean value that indicates if the user must enter data or not. The user must submit data in any fields where needed attributes are indicated inside the input element; otherwise, the webpage will display a default error message. As you can see below, we have made a label and input field pair for entering the username.

<form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <!-- label for username -->
        <label for="username"><b>Username</b></label> 
        <!-- input field for username -->
        <input
          type="text"
          placeholder="Enter username."
          name="username"
          id="username"
          required
        />
      </div>
      <div></div>
    </form>

Output

As demonstrated below, we can also include a label that corresponds to the input fields for the password, email address, and repeat password.

  <form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <!-- label and input for username -->
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />
        <!-- label and input for email -->
        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />
        <!-- label and input for password -->
        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />
        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
      </div>
      <div></div>
    </form>

Output

Then, as depicted in the sample code below, submitting users would be given a submit button in the first division to send the information they have filled up in the registration form.

<form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />

        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />

        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />
        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
        <!-- submit button -->
        <button type="submit">Register</button>
      </div>
      <div></div>
 </form>

Output

Lastly, we can route to the login page from the second div nested inside the form tag. This can be achieved by adding the <a> tag around the text inside <p> tag as follows:

 <form>
      <div>
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />

        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />

        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />

        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
        <button type="submit">Register</button>
      </div>
      <div>
        <p>Already have an account? <a href="#">Log in</a>.</p>
      </div>
 </form>

Output

CSS Styling for the Registration Page

The fundamental framework of the registration form has been successfully constructed. Now we will style the form using CSS to make it look even better.

After creating a CSS file, we should link it to our HTML file.

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css">
    <title>Register</title>
  </head>
<body style="background-color:powderblue;">
</body>
Let us start by adding a few fundamental styles to the form, as indicated below. To add the required styles, choose the <form> tag inside the CSS.
form{
    display: flex;
    flex-direction: column;
    align-items: center;
}

Let us now give the first div tag inside the form a class called "container" and apply it. This is the HTML code that is displayed:

<form>
      <div class="container">
        <h1>Register</h1>
        <p> Fill out the form to register.</p>
        <label for="username"><b>Username</b></label>
        <input
          type="text"
          placeholder="Enter username"
          name="username"
          id="username"
          required
        />
        <label for="email"><b>Email</b></label>
        <input
          type="text"
          placeholder="Enter Email"
          name="email"
          id="email"
          required
        />
        <label for="pwd"><b>Password</b></label>
        <input
          type="password"
          placeholder="Enter Password"
          name="pwd"
          id="pwd"
          required
        />
        <label for="pwd-repeat"><b>Repeat Password</b></label>
        <input
          type="password"
          placeholder="Repeat Password"
          name="pwd-repeat"
          id="pwd-repeat"
          required
        />
        <button type="submit">Register</button>
      </div>
      <div>
        <p>Already have an account? <a href="#">Log in</a>.</p>
      </div>
 </form>

Output

The matching styles assigned to the class "container" are listed below. To put it briefly, it occupies 25vw of width and arranges all the fields vertically as rows.

.container{
    display: flex;
    flex-direction: column;
    width: 25vw;
}

The title and description are then positioned in the form's center, as indicated below.

h1, p{
    text-align: center;
}

The form's basic style is almost finished. As seen below, we can now add the required typefaces and spacing to the input fields.

/* font family is added */
body {
  font-family: Arial, Helvetica, sans-serif;
}
form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  width: 25vw;
}

h1, p {
  text-align: center;
}

/* desired spacing for input fields */
input {
  margin: 0.25em 0em 1em 0em;
}

Let us make our input fields more attractive now.

input {
  margin: 0.25em 0em 1em 0em;
  outline: none;
  padding: 0.5em;
  border: none;
  background-color: rgb(225, 225, 225);
  border-radius: 0.25em;
  color: black;
}

In closing, let us give our submit button some fundamental styling, like the one below, which includes hover functionality.

/* styles for button */
button {
  padding: 0.75em;
  border: none;
  outline: none;
  background-color: rgb(68, 18, 232);
  color: white;
  border-radius: 0.25em;
}

/* hover functionality for button */
button:hover {
  cursor: pointer;
  background-color: rgb(41, 4, 164);
}

Finally, the registration form has been constructed.

Output

The final registration form is shown below: