Dive into html5 9

You are here: Home ‣ Dive Into HTML5 ‣

A FORM OF MADNESS

Show table of contents

DIVING IN

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.

PLACEHOLDER TEXT

PLACEHOLDER SUPPORT
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
· 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.

AUTOFOCUS FIELDS

AUTOFOCUS SUPPORT
IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID
· 4.0+ 4.0+ 3.0+ 10.0+ · ·

Web sites can use JavaScript to focus the first input field of a web form automatically. For example, the home page of Google. com will autofocus the input box so you can type your search keywords. While this is convenient for most people, it can be annoying for power users or people with special needs. If you press the space bar expecting to scroll the page, the page will not scroll because the focus is already in a form input field. (It types a space in the field instead of scrolling.) If you focus a different input field while the page is still loading, the site’s autofocus script may “helpfully” move the focus back to the original input field, disrupting your flow and causing you to type in the wrong place.

Because the autofocusing is done with JavaScript, it can be tricky to handle all of these edge cases, and there is little recourse for people who don’t want a web page to “steal” the focus.

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.