HTML5 Forms Pt. 1: Input Types

HTML5 greatly advances form controls, with numerous additional input types, several new attributes, and a handful of extra elements.

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:

Search

Used for a search query text box, this performs exactly as a standard text input should.


<input type="search" name="search">

The main intention of the inclusion of this input type in the HTML5 specification is one of style. As well as making your HTML clearer, you can also target this element with a CSS attribute selector:


input[type=search] { background: url(magnifyingglass.png) right no-repeat) }

Telephone, URL, and email addresses

Other “special” text input types include tel, for telephone numbers, url, for web addresses, and email, for email addresses.


<input type="tel" name="telephone_number">
<input type="url" name="web_address">
<input type="email" name="email_address">

You can use the :valid and :invalid CSS3 pseudo classes to style these fields depending on whether their content is considered valid.


input[type=email]:valid { background: green }
input[type=email]:invalid { background: red }

This example will paint an email field’s background green if the entered text is recognized as an email address (such as “sausage@htmldog.com”) or red if it isn’t (if the user were to type “sausages?”, for example).

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 min and max attributes.


<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 min and max attributes.


<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:

type="datetime"
type="date"
type="month"
type="week"
type="time"
type="datetime-local"

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.

Color

Finally, 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">