HTML 5 Form Elements New Attributes
Monday, 23rd May 2011
One of the most inspiring sections of Tech Days in London today was the introduction to HTML 5 form elements, part of Bruce Lawson's presentation. Bruce introduced many of the new form elements and also touched on the new attributes you can use in conjunction with the new types.
Essentially, you now have input types for date, email, web address, numbers, ranges and searches and you have attributes for auto-focus, validation and place-holders. All of this excitement got me reading the draft specifications and I have created an example HTML 5 form for you to play with.
To start off, let's look at the new HTML 5 input attributes that are used on the test page.
HTML 5 Input Attributes
There are a few new attributes to help with HTML 5 forms and each deserves a reasonable explanation.
Enter the HTML 5 "autofocus" attribute. This leaves the implementation to the browser and we can assume that they will hone the behaviour to avoid the common pitfalls of the autofocus scripts we used in the past. Here is how you use it!
<input type="text" name="autofocus" autofocus>
You can of course use autofocus="autofocus" if you are a fan of XML.
Here is how you use it:
<input type="text" name="firstname" placeholder="Enter your first name">
<input type="text" name="required" required>
And again, required="required" for XML fans.
<input type="text" name="pattern" pattern="[A-Za-z]" required>
Bear in mind that the message displayed by browsers may not be very descriptive, so you'll need to make sure your label is clear as my tests have shown messages with no text and messages with "Please match the required expression", which aren't much help to your users.
Check back soon for my next instalment on HTML 5 Forms, which will deal with some new special types of input elements.