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.

2. <input type="checkbox">

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

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.

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.

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.

6. <input type="password">

A single-line text field whose value is obscured. Will alert user if site is not secure.

7. <input type="radio">

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

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!

9. <input type="submit">

A button that submits the form.

10. <input type="text">

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

11. <input type="color">

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

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.

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.

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.

15. <input type="month">

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

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.

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.

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.

19. <input type="tel">

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

20. <input type="time">

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

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.

22. <input type="week">

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

<input type="datetime">

The datetime type was dropped around 2014.