HTML forms have been, to date, quite simplistic. We’ve had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.)
The input element works overtime by being rendered completely differently based on the type it’s given—be that a text field, password, checkbox, radio button, and others. Considering my readership, this is all terribly old and boring to you now. I understand.
New Types
Under the HTML5 umbrella, however, forms are getting a makeover. The new input types are:
* search
* tel
* url
* email
* datetime, date, month, week, time, and datetime-local
* number
* range
* color
In the example of an email field, validation could be performed by the browser, without JavaScript, to ensure that an email address was correctly entered. Even more powerful, it could allow autocomplete based on your local address book.
New Attributes
There are also plenty of new attributes, many designed to aid in constraining the limits of a field. Here is a small subset of new attributes:
* list — points to a datalist element containing value suggestions
* max and min — constrains valid date/time and number values
* pattern — allows a regular expression as a constraint
* placeholder — displays a text hint for the field
Fallback
If you try to use these new type now, browsers that don’t recognize the type will fall back to the text type. Unrecognized attributes will similarly be ignored. That means that you could start using it now and when browsers begin to recognize them, you’ll be ready. Client-side validation via JavaScript could be layered on in the meantime.
Where things are unclear is how you can tell whether the browser already supports these features. For example, inspecting the type in Firefox returns “text” but Safari and Chrome return “email”.
Browser Support
What’s most interesting is that we’re starting to see some of these features get implemented into browsers.
Mobile Safari (on the iPhone) was quick out of the gate by adding support for number, email and url. No validation is performed but special keyboards for each input type are presented to aid in entering a value.
Keyboard layouts on Mobile Safari
Most recently, Chrome 5 beta has support for the placeholder attribute.
Placeholder attribute in Chrome 5 beta
<label for=”email”>Email address</label>
<input id=”email” type=”email” placeholder=”jonathan@example.com”>
What next?
I have qualms about how browsers will handle the complex input types like date and time and so I appreciate the slow and considered implementations to date. Yes, this isn’t very much just yet but it’s encouraging.
Home