Tutorials Tonight's Logo

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 <form> tag is used to create an HTML form. Here is a simple example of a form.

<form>
  <label>First name:</label>
  <input type="text">
  <label>Last name:</label>
  <input type="text">
  <input type="submit" value="Submit">
</form>
▶ Run the code

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 <input> 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 <input type="text">.

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

Type Description
<input type="text"> type text - defines single line text input
<input type="number"> type number - defines single line number input which has increasing and decreasing stepper arrows
<input type="password"> type password - defines single line text input but it mask the character
<input type="radio"> type radio - defines a radio button(selecting one of many choises)
<input type="checkbox"> type checkbox - defines checkbox (multiple selection from multiple choice)
<input type="email"> type email - defines single line email input space(inclusion of @ is necessary in this box)
<input type="submit"> 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.

<input type="text"> defines a single line text input field. Here is an example below:

<form>
  First Name: <input type="text"><br>
  Last Name: <input type="text">
</form>
▶ Run the code

Output:

First Name:
Last Name:

HTML number input

The <input> 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.

<form>
  Enter your age: <input type="number">
</form>
▶ Run the code

HTML password input

The <input type="text"> defines single line password input box where the password entered by user is masked as * (asterisk) or as .(bullet).

<form>
  Username: <input type="text"><br>
  Password: <input type="password">
</form>
▶ Run the code

Output:

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.

<form>
  Male:<input type="radio" value="male"><br>
  Female:<input type="radio" value="female"><br>
  Other: <input type="radio" value="other">
</form>
▶ Run the code

Output:

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.

<form>
  Male:<input type="radio" name="male" value="male"><br>
  Female:<input type="radio" name="female" value="female"><br>
  Other: <input type="radio" name="other" value="other">
</form>

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.

<form>
  Coding:<input type="checkbox" name="coding" value="coding"><br>
  Music:<input type="checkbox" name="music" value="music"><br>
  Coffee:<input type="checkbox" name="coffee" value="coffee"><br>
</form>
▶ Run the code

Output:

Coding:
Music:
Coffee:

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

<form>
  Coding:<input type="checkbox" name="coding" value="coding" checked><br>
  Music:<input type="checkbox" name="music" value="music" checked><br>
  Coffee:<input type="checkbox" name="coffee" value="coffee"><br>
</form>

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.

<form>
  Email: <input type="email"><br>
  Password: <input type="password">
</form>
▶ Run the code

Output:

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.

<form>
  Your name: <input type="text"><br>
  Your age: <input type="text"><br>
  <input type="submit" value="Submit form">
</form>
▶ Run the code

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

Output:

Your name:
Your age:

HTML label tag

The <label> 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 <input> tag an id attribute that is same as for value of <label> tag to associate the <label> with an <input> tag.

<form>
  <p>I like:</p>
  <label for="coding">Coding:</label>
  <input type="checkbox" id="coding"><br>
  <label for="music">Music:</label>
  <input type="checkbox" id="music"><br>
  <label for="coffee">Coffee:</label>
  <input type="checkbox" id="coffee">
</form>
▶ Run the code

Output:

I like:




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.

<form>
  Name: <input type="text"><br>
  Address: <textarea rows="3" cols="30"></textarea>
</form>
▶ Run the code

Output:

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.

<form>
  Name: <input type="text" placeholder="Enter you names"><br>
  Age: <input type="text" placeholder="Enter your age">
</form>
▶ Run the code

Output:

Name:
Age:

Conclusion

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


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.