« Back to home

Reviewing all input types

1. <input type="button">

A push button with no default behavior displaying the value of the value attribute, empty by default.

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

2. <input type="checkbox">

A check box allowing single values to be selected/deselected.

<input type="checkbox" id="checkbox">
<label for="checkbox">Subscribe</label>

3. <input type="file">

A control that lets the user select a file. The accept attribute defines the types of files that the control can select.

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

4. <input type="hidden">

A control that is not displayed but whose value is submitted to the server. There is an example below, but it's hidden.

<input type="hidden">

5. <input type="image">

A graphical submit button. Displays an image defined by the src attribute. The alt attribute presents an accessible name for the element.

<input type="image" alt="Login" src="image.png">

6. <input type="password">

A single-line text field whose value is obscured. Some browsers will warn the user if the page is not served over HTTPS

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

7. <input type="radio">

A radio button, allowing a single value to be selected out of multiple choices with the same name value.

<input type="radio" id="radio">
<label for="radio">Yes</label>

8. <input type="reset">

A button that resets the contents of the form to default values. This presents a range of usability issues and should be avoided!

<input type="reset" value="reset">

9. <input type="submit">

A button that submits the form.

<input type="submit" value="Submit">

10. <input type="text">

The default value. A single-line text field. Line-breaks are automatically removed from the input value.

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

11. <input type="color">

A control for specifying a color; opening a color picker when active in supporting browsers.

<label for="color">Pick a colour</label>
<input type="color" id="color">

12. <input type="date">

A control for entering a date (year, month, and day, with no time). Opens a date picker or numeric wheels for year, month, day when active in supporting browsers.

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

13. <input type="datetime-local">

A control for entering a date and time, with no time zone. Opens a date picker or numeric wheels for date- and time-components when active in supporting browsers.

<label for="datetime">Choose a date and time</label>
<input type="datetime-local" id="datetime">

14. <input type="email">

A field for editing an email address. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

<label for="email">Email address</label>
<input type="email" id="email">

15. <input type="month">

A control for entering a month and year, with no time zone.

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

16. <input type="number">

A control for entering a number. Displays a spinner and adds default validation. Displays a numeric keypad in some devices with dynamic keypads.

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

17. <input type="range">

A control for entering a number whose exact value is not important. Displays as a range widget defaulting to the middle value. Used in conjunction min and max to define the range of acceptable values.

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

18. <input type="search">

A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. May include a delete icon in supporting browsers that can be used to clear the field. Displays a search icon instead of enter key on some devices with dynamic keypads.

<label for="search">Search the site</label>
<input type="search" id="search">

19. <input type="tel">

A control for entering a telephone number. Displays a telephone keypad in some devices with dynamic keypads.

<label for="tel">Phone number</label>
<input type="tel" id="tel">

20. <input type="time">

A control for entering a time value with no time zone.

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

21. <input type="url">

A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

<label for="url">Web address</label>
<input type="url" id="url">

22. <input type="week">

A control for entering a date consisting of a week-year number and a week number with no time zone.

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

23. <input type="datetime">

The datetime type was dropped around 2014.

« Back to home