HTML5 Forms Pt. 1: Input Types
HTML5 greatly advances form controls, with numerous additional
input types, several
new attributes, and a handful of
Additional input types
Basic form fields created using the
input element include text, password, checkbox, radio, and submit, which have already been covered in the HTML Beginner section. These types have been extended in HTML5 to accommodate more specific fields:
Used for a search query text box, this performs exactly as a standard text input should.
<input type="search" name="search">
Telephone, URL, and email addresses
Other “special” text input types include
tel, for telephone numbers,
url, for web addresses, and
<input type="tel" name="telephone_number"> <input type="url" name="web_address"> <input type="email" name="email_address">
Numbers and ranges
A simple text box that also allows a user to directly type in a number, or cycle through numbers (usually using an up and down arrow to the side of the field), can be achieved with
type="number". A further
step attribute can be added to specify how much is added or subtracted from the number with each increment.
If you also want the number to have a minimum or maximum value, you can further use the
<input type="number" name="quantity" step="2" min="20" max="30">
Once again, if this is supported, the user will be able either to type directly into the field or, if using the arrows, cycle between 20 and 30, two units at a time.
An alternative to the digits-in-a-text-box approach can be achieved using
type="range". By default, this should be displayed as a horizontal bar with a slider in the middle of it. The user can then adjust the slider left and right, the far left resulting in a value of “0” and the far right a value of “100”. This range can be adjusted using the
<input type="range" name="temperature" min="15" max="25" step="0.5" value="18.5">
Dates and times
There are several input types for dates and times:
If supported (they aren’t, widely, and they are also inconsistent between browsers), these will prompt the user to enter a date or time in a specific format, either by directly typing it in, cycling through one week/day/hour/minute/etc. at a time, or by selecting from a dropdown calendar.
type="color" is designed to allow a user to select a color, sending a six-digit hex code as its value.
<input name="color" type="color" value="#ff8800">