HTML Form Inputs

Being familiar with all the input types can make your forms better suited for the end user.

Button: A push button with no default behavior.

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

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

<input type="checkbox">

Color: control for specifying a color. A color picker’s UI has no required features other than accepting simple colors as text Note this is not support in IE 11 caniuse reference

<input type="color">

A control for entering a date (year, month, and day, with no time)

<input type="date">

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

<input type="datetime-local">

A field for editing an e-mail address.

<input type="email">

A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.

<input type="file">

A control that is not displayed but whose value is submitted to the server.

<input type="hidden">

A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

<input type="image" src="/assets/images/send-image.png" width="50px">

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

<input type="month">

A control for entering a number.

<input type="number">

A single-line text field whose value is obscured. Use the maxlength and minlength attributes to specify the maximum length of the value that can be entered.

<input type="password">

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

<input type="radio" name="pref" value="savory"> Savory
<input type="radio" name="pref" value="sweet"> Sweet

Savory Sweet

A control for entering a number whose exact value is not important.

<input type="range">

A button that resets the contents of the form to default values.

<form>
Input 1<input type="text" name="input-1">
Input 2<input type="text" name="input-2">
<input type="reset">
</form>

A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.

<input type="search">

A button that submits the form.

<input type="submit">

A control for entering a telephone number

<input type="tel">

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

<input type="text">

A control for entering a time value with no time zone

<input type="time">

A field for entering a URL.

<input type="url">

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

<input type="week">