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 tag. The 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:

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-01.png" data-lazy- height="232" src="data:image/svg xml,” width=”940″>

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 tag.

Example

The below snippet shows how submit type works:

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-02.png" data-lazy- height="194" src="data:image/svg xml,” width=”936″>

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-03.png" data-lazy- height="194" src="data:image/svg xml,” width=”940″>

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:

Following will be the output of this code:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-04.png" data-lazy- height="480" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-05.png" data-lazy- height="300" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-06.png" data-lazy- height="202" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-07.png" data-lazy- height="242" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-08.png" data-lazy- height="224" src="data:image/svg xml,” width=”940″>

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”:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-09.png" data-lazy- height="198" src="data:image/svg xml,” width=”940″>

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-10.png" data-lazy- height="226" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-11.png" data-lazy- height="224" src="data:image/svg xml,” width=”940″>

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-12.png" data-lazy- height="774" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-13.png" data-lazy- height="228" src="data:image/svg xml,” width=”940″>

A user can pick a date as follows:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-14.png" data-lazy- height="784" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-15.png" data-lazy- height="210" src="data:image/svg xml,” width=”940″>

A user can pick a time of his choice:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-16.png" data-lazy- height="762" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-17.png" data-lazy- height="208" src="data:image/svg xml,” width=”940″>

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

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-18.png" data-lazy- height="470" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-19.png" data-lazy- height="724" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-20.png" data-lazy- height="654" src="data:image/svg xml,” width=”940″>

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:

<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/input-types-html-21.png" data-lazy- height="330" src="data:image/svg xml,” width=”940″>

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

Conclusion

The 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

<img data-del="avatar" data-lazy-src="https://kirelos.com/wp-content/uploads/2022/02/echo/FA9AFCF66E2D44C3A65378AC87A87EB4-150×150.jpg621995db1fc45.jpg" height="112" src="data:image/svg xml,” width=”112″>

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.

Show Comments