You are here: Home ‣ Dive Into HTML5 ‣
A FORM OF MADNESS
Show table of contents
Verybody knows about web forms, right? Make a, a few elements, maybe an, finish it off with an button, and you’re done.
You don’t know the half of it. HTML5 defines over a dozen new input types that you can use in your forms. And when I say “use,” I mean you can use them right now – without any shims, hacks, or workarounds. Now don’t get too excited; I don’t mean to say that all of these exciting new features are actually supported in every browser. Oh goodness no, I don’t mean that at all. In modern browsers, yes, your forms will kick all kinds of ass. But in legacy browsers, your forms will still work, albeit with less ass kicking. Which is to say, all of these features degrade gracefully in every browser. Even IE 6.
IE FIREFOX SAFARI CHROME OPERA IPHONE
· 3.7+ 4.0+ 4.0+ 11.0+ 4.0+ ·
The first improvement HTML5 brings to web forms is the ability to set placeholder text in an input field. Placeholder text is displayed inside the input field as long as the field is empty and not focused. As soon as you click on (or tab to) the input field, the placeholder text disappears.
You’ve probably seen placeholder text before. For example, Mozilla Firefox includes placeholder text in the location bar that reads “Search Bookmarks and History”:
When you click on (or tab to) the location bar, the placeholder text disappears:
Here’s how you can include placeholder text in your own web forms:
Browsers that don’t support the placeholder attribute will simply ignore it. No harm, no foul. See whether your browser supports placeholder text.
ASK PROFESSOR MARKUP
☞Q: Can I use HTML markup in the placeholder attribute? I want to insert an image, or maybe change the colors.
A: The placeholder attribute can only contain text, not HTML markup. However, there are some vendor-specific CSS extensions that allow you to style the placeholder text in some browsers.
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
· 4.0+ 4.0+ 3.0+ 10.0+ · ·
To solve this problem, HTML5 introduces an autofocus attribute on all web form controls. The autofocus attribute does exactly what it says on the tin: as soon as the page loads, it moves the input focus to a particular input field. But because it’s just markup instead of script, the behavior will be consistent across all web sites.