Input types

The following are valid values for the type attribute of the <input> element.

Input type

Description

Related attributes

Availability

button

When specified, the browser renders a button control. The value attribute specifies the text of the button.

name, value

3.7 or later

checkbox

When specified, the browser renders a check box control. You can use check boxes anywhere in a form element.

checked, name (required), placeholder, readonly, size, value

3.7 or later

date

When specified, the browser renders a date picker control. Users can specify the year, month, and day, with no time zone.

If you specify the value, max or min attributes, you must specify a valid value for this input type.

max, min, name (required), readonly, value

4.7.1 or later

datetime

When specified, the browser renders a date picker control. Users can specify the year, month, day, hour, and minute.

The browser automatically rounds time values to the nearest minute and sets the value for the seconds and milliseconds to 0. It also sets the time zone as UTC.

If you specify the value, max or min attributes, you must specify a valid value for this input type.

max, min, name (required), readonly, value

4.7.1 or later

datetime-local

When specified, the browser renders a date picker control. Users can specify the year, month, day, hour, and minute, with no time zone.

The browser automatically rounds time values to the nearest minute and sets the value for the seconds and milliseconds to 0.

If you specify the value, max or min attributes, you must specify a valid value for this input type.

max, min, name (required), readonly, value

4.7.1 or later

email

When specified, the browser renders an email control. An email control is a text field that accepts only an email address.

Users can press the Space key to insert an at sign (@) or a period (.) in an email address.

maxlength, name (required), placeholder, readonly, size, value

4.7.1 or later

file

When specified, the browser renders a button control that opens a dialog box in which users can browse for a file. The browser displays the file name of the selected file in the form, and includes the file when the user submits the form.

accept, name (required), value

4.6 or later

hidden

When specified, the browser does not render anything, but does include the element's associated name and value attributes when the user submits the form.

name (required), value

3.7 or later

image

When specified, the browser renders the specified image, which functions as a button.

alt, name (required), src, value

4.6 or later

month

When specified, the browser renders a date picker control. Users can specify the month and year. The browser does not set a time zone for this input type.

If you specify the value, max or min attributes, you must specify a valid value for this input type.

max, min, name (required), readonly, value

4.7.1 or later

number

When specified, the browser renders a text field control that accepts only numerical values.

name (required), value

4.7.1

password

When specified, the browser renders a password control. A password control is a text field that obscures the value by displaying an asterisk (*) for each character that the user types.

The browser includes the actual encoded value when the user submits the form.

maxlength, name (required), placeholder, readonly, size, value

3.7 or later

radio

When specified, the browser renders a radio button control. You can use radio button anywhere in a form element.

checked, name (required), placeholder, readonly, size, value

3.7 or later

range

When specified, the browser rendees a slide bar control. Users can adjust the slide bar to assign a value.

If you do not specify the max, min, and step attributes, the browser specifies a default max value of 100, a default min value of 0, and a default step value of 1.

max, min, name (required), value

4.7.1 or later

reset

When specified, the browser renders a button control that users can click to reset the values in the associated form to their original values. This does not affect other forms on the screen.

value

3.7 or later

search

When specified, the browser renders a text field control that accepts a single line of text with no line breaks.

maxlength, name (required), placeholder, readonly, size, value

4.7.1 or later

submit

When specified, the browser to render a button control that users click to submit the values of the associated form to the specified server.

On submit, the browser passes the form values to the server and opens the URL that the action attribute of the <form> element specifies.

value

3.7 or later

text

When specified, the browser to render a text field control that accepts a single line of text with no line breaks.

For a multiline text field, use the <textarea> element.

maxlength, name (required), placeholder, readonly, size, value

3.7 or later

time

When specified, the browser renders a date picker control. Users can specify the hour and minute. The browser automatically rounds time values to the nearest minute and sets the value for the seconds and milliseconds to 0. The browser does not set a time zone for this input type.

If you specify the value, max or min attributes, you must specify a valid value for this input type.

max, min, name (required), readonly, value

4.7.1 or later

url

When specified, the browser renders a text field control that only accepts a web address. Users can press the Space key to insert a period (.) in a web address.

This input type verifies that the syntax of the entered URL is valid. It does not verify that the supplied web address exists.

maxlength, name (required), placeholder, readonly, size, value

4.7.1 or later

week

When specified, the browser renders a date picker control. Users can specify the week number and year. The browser does not set a time zone for this input type.

If you specify the value, max or min attributes, you must specify a valid value for this input type.

max, min, name (required), readonly, value

4.7.1 or later

Previous topic: W

Was this information helpful? Send us your comments.