HTML5 form elements new attributes
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.
To start off, let’s look at the new HTML5 input attributes that are used on the test page.
HTML5 Input Attributes
There are a few new attributes to help with HTML5 forms and each deserves a reasonable explanation.
Enter the HTML5 “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><span id="mce_marker" data-mce-type="bookmark"></span>
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 HTML5 Forms, which will deal with some new special types of input elements.