Building the Preferences Form
Let’s craft a form using some semantic HTML5 markup and some of the new
form controls you learned about in Chapter 3, Creating User-Friendly Web
Forms, on page 37. We want to let the user change the foreground color, the
background color, and the font size.html5_localstorage/index.html
<!DOCTYPEhtml>
<htmllang="en-US">
<head>
<metacharset="utf-8">
<title>Preferences</title>
<linkrel="stylesheet"href="stylesheets/style.css">
<scriptsrc="javascripts/modernizr.js"></script>
</head>
<body>
<divid="container">
<p><strong>Preferences</strong></p>
<formid="preferences"action="save_prefs"
method="post"accept-charset="utf-8">
<fieldsetid="colors"class="">
<legend>Colors</legend>
<ol>
<li>
<labelfor="background_color">Backgroundcolor</label>
<inputclass="color"type="color"name="background_color"
value=""id="background_color">
</li>
<li>
<labelfor="text_color">Textcolor</label>
<inputclass="color"type="color"name="text_color"
value=""id="text_color">
</li>
<li>
<labelfor="text_size">Textsize</label>
<selectname="text_size"id="text_size">
<optionvalue="16">16px</option>
<optionvalue="20">20px</option>
<optionvalue="24">24px</option>
<optionvalue="32">32px</option>
</select>
</ol>
</fieldset><inputtype="submit"value="Savechanges">
</form>
</div>
</body>
</html>Chapter 9. Saving Data on the Client • 186
Download from Wow! eBook <www.wowebook.com> report erratum • discuss