HTML FORMS

In this tutorial, you will learn all about HTML forms, their inputs, submission, and resetting forms.

Forms are one of the most useful and big parts of HTML programming. While filling exam details, participating in surveys, booking tickets or registering account and at many more similar thing what you interact with is an HTML form .

An HTML form is a part of an HTML document that is used to take data as input from the user.

It has input areas such as text field, password field, radio button, checkbox, submit button, menus, etc which is used by the users to enter information.

HTML form element

The tag is used to create an HTML form. Here is a simple example of a form.

The output of the above code looks like this.

output 1

The data received by HTML forms are sent to the server for processing.

HTML input type

The information is taken by the user in a form using input sections. There are many different types of input data that a user can submit like name, age, phone number, password, checkbox, etc.

HTML form has a different variety of inputs. The tag is used to specify an input element.

The most important part of the input is input type. It is the input type that defines what kind of information the input box will collect. Example .

Here is list of all types of input an HTML form can have.

Type Description
type text - defines single line text input
type number - defines single line number input which has increasing and decreasing stepper arrows
type password - defines single line text input but it mask the character
type radio - defines a radio button(selecting one of many choises)
type checkbox - defines checkbox (multiple selection from multiple choice)
type email - defines single line email input space(inclusion of @ is necessary in this box)
type submit - defines a submit button for submitting form

HTML text input

If you want to take any text input line user's name then use text type input box.

defines a single line text input field. Here is an example below:

 First Name:  
Last Name:

HTML number input

The element with type number defines a number input with inbuilt validation to non-numerical entries.

The browser may provide stepper arrow keys in the input section to increase and decrease the value.

 Enter your age:

HTML password input

The defines single line password input box where the password entered by user is masked as * (asterisk) or as .(bullet).

 Username:  
Password:

HTML radio button input

The radio buttons are used to select one among multiple choices. Like yes or no, male or female, etc.

Use type radio to define a radio button.

A value attribute is used with radio buttons to set a value when a radio button is checked. It is not visible to the user but is used by developers.

 Male: 
Female: 
Other:

There is also a name attribute that is used with a radio button so that server may know where the input came from.

 Male: 
Female: 
Other:

HTML checkbox input

The checkboxes are used when there are multiple selection options like the interest of a person, subject of a class, etc. The type checkbox with the input tag defines a checkbox button.

 Coding: 
Music: 
Coffee:

You can add checked attributes on the checkbox to select them by default.

 Coding: 
Music: 
Coffee:

HTML email input

The type email is used with an input tag to let users enter their email addresses. It defines a single-line text box where the use of @ and a dot (.) is necessary.

 Email:  
Password:

HTML submit button

All forms are finally submitted when filled, so technically there must be a submit button in a form.

To create a submit button use type submit on the input tag. The submit button contains a value attribute it stores the value of what is shown on submit button.

Your name:
Your age:

Note: When a form is submitted then bu default current page refreshes.

HTML label tag

The tag is an optional part of the HTML form but it is better to use them. label tag doesn't provide anything special to form but it makes it convenient for the user; when you click on text written in between label tags it will start toggling its corresponding input box.

It can be used in every type of input.

You need to give the tag an id attribute that is same as for value of tag to associate the with an tag.

HTML textarea element

The textarea element defines multiple line boxes to receive multi-line information. like comments, addresses, etc.

It uses the attribute rows and cols to define the size of textarea.

 
Name:  
Address:

placeholder text

The placeholder attribute is used to provide a brief hind about the input boxes.

The placeholder value should be short and meaningful.

 Name:  
Age:

Conclusion

In this tutorial, we learned about HTML forms and their input types in detail.

Stay Ahead, Learn More