The type Attribute

The Current State of HTML5 Forms

<input type="text" placeholder="(555) 555-5555">
<textarea placeholder="Smurfberries<"/strong>></textarea>

Live Demo

Text input

Textarea

 


Firefox
Safari
Safari
Chrome
Opera
IE
Android

The Low Down

The type attribute defines which type of input control to display and, depending on which type is included, provides for some validation in supporting browsers.

  • The default type is text, displaying a single-line text field, if the type is set to text or if the attribute is not specified.
  • Other values include:
    • button, displaying a button with no default behavior.
    • checkbox, which displays a check box.
    • color provides a control for specifying a 6-digit hexadecimal color,
    • date provide a GUI for entering a date with year, month, and day, but no time).
    • datetime is similar to date, but also provides for entering a time based on UTC time zone,
    • datetime-local is like datetime, but with no time zone.
    • email provides a single line text field for editing an e-mail address accepting a single valid e-mail address or multiple comma separated email addresses is the multiple attribute is present, providing an email friendly keyboard on devices that have dynamic touch keyboards,
    • file provides a control that lets the user select one or more files, including capturing audio, images and video,
    • hidden is control that is not displayed to the user, providing a way of submitting hidden name/value pairs to the server.
    • image allows the developer to create a graphical button with jpegs, pngs, svg or gifs,
    • month provides control for selecting a numeric month and year,
    • number provides a control for entering a number, with a spinner number selector in some browsers, and a numeric keyboard on devices that have dynamic touch keyboards,.
    • password provides for a single-line text field whose value is obscured,
    • radio creates a radio button of which only one in a same value named radio button group can be selected at a time,
    • range is for imprecise number-input, providing a slider control,
    • reset displays as a button that resets the contents of a form to its default values.
    • search provides a single-line text field for entering search strings, that sometimes has rounded corners and/or a control within the text box to delete the contents,
    • submit display a button that submits the form.
    • tel provides a single line control and a telephone keypad on devices that have dynamic keyboards,
    • time provides a control for entering a time value with no time zone,
    • url provides a text field requiring a protocol and displaying and an URL friendly keyboard on devices that have dynamic touch keyboards,
    • week provides a control for entering a week number and year with no time zone.