HTML5 Forms Are Coming
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.
Under the HTML5 umbrella, however, forms are getting a makeover. The new input types are:
- datetime, date, month, week, time, and datetime-local
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
If you try to use these new type now, browsers that don't recognize the type will fall back to the
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 "
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.
Most recently, Chrome 5 beta has support for the placeholder attribute.
<label for="email">Email address</label> <input id="email" type="email" placeholder="firstname.lastname@example.org">
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.