HTML Input Types

Date: 12-1-24, and 12-8-24.

This chapter describes the different types for the HTML <input> element.

HTML Input Types

Here are the different input types you can use in HTML:

< type="button">
< type="checkbox">
< type="color">
< type="date">
< type="datetime-local">
< type="email">
< type="file">
< type="hidden">
< type="image">
< type="month">
< type="number">
< type="password">
< type="radio">
< type="range">
< type="reset">
< type="search">
< type="submit">
< type="tel">
< type="text">
< type="time">
< type="url">
< type="week">

Tip: The default value of the type attribute is "text.

Input Type Text

<input type="text"> defines a single-line text input field:

Text field

Note that the form itself is not visible.

Also note that the default width of a text field is 20 characters.

This is how the HTML code above will be displayed in a browser:

Input Type Password

<input type="password"> defines a password field:

Password field

The input type="password" defines a password field:

The characters in a password field are masked (shown as asterisks or circles).

This is how the HTML code above will be displayed in a browser:

Input Type Submit

<input type="submit"> defines a button for submitting form data to a form-handler. The form-handler is typically a server page with a script for processing input data. The form-handler is specified in the form's action attribute:

Submit Button

The input type="submit" defines a button for submitting form data to a form-handler:

First name:

Middle name:

Last name:

If you click "Submit", the form-data will be sent to a page called "/action_page.php".

Input Type Rest

<input type="reset"> defines a reset button that will reset all form vlaues to their default values:

Reset Button

The input type="reset" defines a reset button that resets all form values to their default values:

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

This is how the HTML code above will be displayed in a browser:

If you change the input values and then click the "Reset" button, the form-data will be reset to the default values.

Input Type Tel

The <input type="tel"> is used for input fields that should contain a telephone number.

Telephone Field

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

Show a Time Input Control

If the browser supports it, a time picker pops up when entering te input field.

Note: type="time" is not supported in Internet Explorer 11.

Input Type Url

The <input type="url"> is used for input fields that should contain a URL address.

Depending on browser support, the url field can automatically validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.

Display a URL Field

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

Display a Week Input Control

If the browser supports it, a date picker pops up when entering the input field.

Note: type="week" is not supported in Firefox, Safari or Internet Explorer 11.