html5_placeholder/stylesheets/style.css
fieldset{
width:216px;
}fieldsetol{
list-style:none;
padding:0;
margin:2px;
}fieldsetol li{
margin:00 9px 0;
padding:0;
}/* Makeinputsgo to theirown line*/
fieldsetinput{
display:block;
}Now users of Safari, Opera, and Chrome will have helpful text inside the form
fields. Let’s make Firefox and Internet Explorer play along.Falling Back
There are lots of proposed solutions for making placeholders work in old
browsers, but one of the simplest solutions is the jQuery Placeholder plug-
in.^6 We’ll use this plug-in the same way we added fallback support for color
pickers—by detecting support for placeholders and loading and activating
the plug-in only when there’s no support.Let’s add support to our form by creating a new file called javascripts/fallbacks.js,
which will hold our detection and fallback code. Then we link that file to the
HTML page with a <script> tag at the bottom of the page:html5_placeholder/index.html
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
</script>
<scriptsrc='javascripts/fallbacks.js'></script>We’ll use Modernizr just like we did in Detecting Features with Modernizr, on
page 47, which means we need to include the Modernizr library in the <head>
section of our page so it applies things properly:Chapter 3. Creating User-Friendly Web Forms • 52
Download from Wow! eBook <www.wowebook.com> report erratum • discuss