How to create forms in HTML : A Beginner's Guide

Whenever you visit a social media website or social media app like Facebook, Instagram or Snapchat, you see a little button which say login or sign up to use the website or app like the form below. When you click on it, a form appears and ask you enter your details like username, email, password, date of birth, etc. You might have wondered how this form is created. How someone tell the website to take the name, password but do not show the content of password, etc. Lets learn about the creation of forms through the HTML elements and their attributes.

How the forms are created?

To create a form, we use HTML elements and attributes like form, input and its various types. Lets learn about them one by one.

<form> Element

The <form> element is used to create the forms as the name already tells you what it will do. This element acts as a container which contain all the input elements and label elements which are used for contents of the form.

The attribute class=”” tells of class the form belong to. It separate other forms with each other having different class.

<label> Element

The <label> element is used to give the context of the input elements (which we will discuss later). This element is useful for screen readers which read out loud what the input we have to give in the input field. You have seen the it before, like Date of Birth from the above sign up form.

In this image, we have a <label> which tell the First name: and an <input type=”text”> which give the text area to write the name. The attribute for=”” is useful to tell what the label is for.

<input> Element

The <input> element is the most full and most used element to make the forms. These provide a way to accept the data from the user. There are different types of input elements which are used for different data to accept.

This image tells us that to accept the name data we first determine the input element type. For this, type=”” attribute is used. The name=”” attribute is important to used because without it, the data is not accepted. The required attribute tells the browser that the name has to be filled and without it the form will not be submitted. The maxlength and minlength tells the browser that the name must be greater than 4 and less than 8. The size attribute control the size of input type=”text”.

There are many different type of <input> elements which can be used. Lets discuss them based on the input elements that are used in the above sign up form.

<input type=”text”> : This is used for accepting the alphanumeric values and special symbols also. This create a single text fields.

<input type=”date”> : This is used for accepting the date data. Like the Date of Birth from the above form. The UI for selecting the date is generated by the browser and operating system.

In this, id=”” attribute is used for assigning a unique value to the element.

<input type=”radio”> : This is used for radio groups - collection of radio buttons describing the set of options. For example, in some forms, they ask your gender and there are some options with small circles in front or back of them. They are radio buttons. Only one of the radio button can be selected between them.

<input type=”email”> : This is used to let the user to enter and edit their email address.

In this, pattern=”” attribute is used to tell the browser to accept the specific pattern of email only. When this attribute is specified the input value must match for the value to pass constraint validation. The size=”” attribute tells that the value of email can be 30.

<input type=”tel”> : This is used to accept the phone numbers from the user. When this is used and user use the mobile browser, this input type will automatically open the num pad. This type takes numbers and some special symbol like +, -. This is used because different countries have different mobile numbers.

In this, we can specify pattern=”” attribute to accept the correct phone number. The required attribute is used to tell the browser and user that the number must be filled to submit the form.

<input type=”password”> : This is used for accepting the passwords from the user. When the enter the password in any log in or sign up form, it only shows * instead or the password unless you tells the browser to show your password. This is to protect your password from other.

In this, minlength attribute is used to tell the browser that the password must be the length of 8 atleast. The required attribute is used to tell the browser and user that the password must be filled to submit the form.

<input type=”submit”> : This is used to submit the form. This is rendered as a button. When you click on the submit button, it will send the form to the server.

The value=”” attribute is used to display the label of input element. It provide the description of the button. If we don’t use the value attribute, the button simply says submit.

<input type=”checkbox”> : This is rendered as a box which is checked when activated. The appearance of the box is dependent on the browser and operation system. The basic appearance is small square box and when clicked it will be filled by blue color or tick. You might have seem them in some forms which ask you to click on correct answer which might have multiple correct answer.

Conclusion

This are all the elements that are mostly used for creating the forms. There are many other types of input elements that can be used for different features. You can learn about by searching in google. The popular website is mdn web docs. I hope you understand how the forms are created.