Please note that a lot of what I’ve learned about HTML5 form attributes comes from “Dive into HTML5” by Mark Pilgrim (Chapter 9: A Form of Madness) and that this post is only meant to summarize this chapter. If you want to read about HTML5 forms in greater detail or wish to learn about browser compatibility then I strongly recommend you read the chapter, it’s a very useful resource.
If, however, you’re only looking for a summary of the new form attributes then please read on.
However, with HTML5 it’s now possible to do with a simple tag in your input element:
<input type=”text” autofocus>
(If you’re used to XHTML then you might be squirming with the lack of “/>” at the closing of the element, however with HTML5 this is not necessary.)
Now, when the page loads in supporting browsers, the text cursor will focus on the appropriate field. Browsers that do not support the new attribute will simply ignore it.
<input name=”search” placeholder=”Enter search text here…”>
Once again, this new attribute will be ignored by unsupported browsers so you have nothing to loose by adding it.
New Input Types
Normally when creating a form to collect an e-mail address, urls, or even a numbers, designers will often use the following input type:
This is all very well since the these inputs are indeed made up of text, however, with HTML5 you can now be a little more specific:
Email: <input type=”email”>
URL: <intput type=”url’>
Number: <input type=”number”>
Number with restrictions: <input type=”number” min=”0” max=”45” step=”15” value=”0”>
(step is the interval between min and max. This might be used for collect a time where only 15 mins intervals are suitable. Value is the default value.)
These input types are valid in all browsers because those who don’t recognize them will just default to input type=”text”.
What are the benefits of these new input types? Well first of all there are mobile devices, such as the iPhone, to consider. With the iPhone’s touch screen keyboard there is a keyboard layout specific to emails that includes “.” and “@”. The ‘URL’ type will include keys such as “.com” and the ‘numbers’ type will use the numeric keyboard instead of the “qwerty” keyboard. If you use the new input types in your markup then your iPhone users will get the benefit of these dedicated keyboards. OK so maybe it’s not a life altering breakthrough, but it improves with usability and every little helps.
If, for some reason, you don’t want your form to validate automatically then you can turn it off:
In addition to validating user input, HTML5 can also deal with required fields:
<input id=”name” type=”text” required>
Now (in supported browsers) the input field with id “name” cannot be submitted without some content in it. Different browsers might display the error message differently.
If you’re interesting in these new the new attributes and want to learn about them in greater detail then I strongly recommend you read “Dive into HTML5” by Mark Pilgrim (Chapter 9: A Form of Madness).
You can also read about HTML5 forms from the W3 website.