html

Input Types in HTML

HTML forms are used to take input from the user and to do so a form uses different input tags. In simple words, the HTML forms are incomplete without <input> tag. The <input> tags can be used within the form tag to declare the input controls that allow a user to input the data in various ways such as collecting data using text fields, dropdown lists, etc.

This write-up presents a complete overview of the following input types:

  1. Text
  2. Submit
  3. Email
  4. Password
  5. Button
  6. Radio
  7. Checkbox
  8. File
  9. Color
  10. Date
  11. Time
  12. Datetime-local
  13. Week
  14. Month
  15. Tel

This write-up will present a complete guide for all the above-mentioned input types, so, let’s get started! 

Type Text

The text type determines a single-line text field.

Example
The below given snippet creates a text type input field within a form tag:

<form>
    <label for="name"> Name</label>
    <input type="text" id="name" name="name">
</form>

The above code snippet will generate the output something like this:

The output verifies that the input field takes text type data.

Type Submit

The submit type button sends the form’s data to the URL specified within the <form action> tag.

Example
The below snippet shows how submit type works:

<form action="forms.html">
    <label>Name </label>
    <input type="text" name="name">
    <button>Submit</button>
</form>

The above code specifies a URL of an HTML file in the form tag, moreover it creates a button and a text field. Clicking on the submit button will send the data entered within the text field to the forms.html page.

Before clicking on the button we are on the formAttributes.html page, so, the output of the above code snippet will be like this:

Clicking on the button will display the user-entered data on the forms.html page:

This is how the submit button works in HTML.

Type Email

It is used to take the email address of the user and if someone enters the irrelevant data, the email type wouldn’t submit that data:

<form action="forms.html">
    <label for="email"> Email</label>
    <input type="email" id="email" name="email">
    <button>Submit</button>
</form>

Following will be the output of this code:

Type Password

The password type is used to determine a password field:

<label for="password"> Password</label>
<input type="password" id="password" name="password">

The above piece of code produce the following output:

Type Button

It is used to create a clickable button:

<input type="button" value="Button">

The above line of code initially shows the following output:

Type Radio

It is used to create a radio button which allows a user to pick one option out of multiple options:

<input type="radio" id="front_end" name="developer" value="front_end">
<label for="front_end">Front-End</label><br>
<input type="radio" id="back_end" name="developer" value="back_end">
<label for="back_end">Back-End</label><br>

The above code will provide the following output:

Type Checkbox

The checkbox type is used to create a checkbox that allows a user to select a single or multiple options:

<input type="checkbox" id="front_end" name="front_end" value="front_end">
<label for="Designation"> I am a front end developer</label><br>
<input type="checkbox" id="back_end" name="back_end" value="back_end">
<label for="Designation"> I am a back end developer</label><br>

The above-given snippet shows the following output:

The output authenticates the working of the checkbox.

File Type

To attach a file on a website the file input type can be used:

<label for="file">Choose a file:</label>
<input type="file" id="file" name="file">

Initially it displays “no file chosen”:

When a user selects a file then the file name will be displayed adjacent to the “choose File” option:

Color Type

This input type is used to create a color picker. The by default value is black however, a user can pick a color using RGB color values:

<label for="color">Choose a color</label>
<input type="color" id="color" name="color">

The above piece of code provides the following output:

Clicking on the color will show will allow a user to pick a color of his choice:

Date Type

It is used to create a date type field that allows a user to pick a date:

<label for="date">Pick a Date </label>
<input type="date" id="date" name="date">

Following will be the output for the above code snippet:

A user can pick a date as follows:

Time Type

It is used to create a time type field that allows a user to pick a time. The time input type can be implemented in the same way as the date type:

<label for="time">Pick a Time </label>
<input type="time" id="time" name="time">

Initially, the above lines of code will provide the following output:

A user can pick a time of his choice:

Datetime-local

It can be used to specify date and time simultaneously:

<label for="time-date">Pick a date & time</label>
<input type="datetime-local" id="time-date" name="time-date">

The output of the above code snippet will look like this:

A user can pick both date and time simultaneously as shown below:

Week

It is used to select a week, the below snippet will provide a better understanding:

<label for="week">Pick a week </label>
<input type="week" id="week" name="week">

The below-given snippet shows the output of above lines of code:

Month

It is used to select a month, the below code snippet describes the working of month input type:

<label for="month">Pick a Month </label>
<input type="month" id="month" name="month">

The output of above-given snippet will look like this:

Tel Type

It is used to take a telephone number from the user. We can specify a specific pattern that must be followed. The below snippet shows the working of tel input type:

<label for="tel">Enter your phone number:</label>
<input type="tel" id="tel" name="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

If someone enters an irrelevant pattern then an warning message will be displayed to enter the requested format:

Output verifies that the “tel” input type is working properly.

Conclusion

The <input> tag provides input controls to accept the data from the user in various ways. In HTML different input types can be used to take the input from the user, for example, text, email, password, button, submit, and many more. All these input types come up with different functionalities. This article provides a comprehensive overview of some most frequently used input types and considered multiple examples for better understanding.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.