Dependable Tools in Our Toolbox
Forms are often the last thing developers include in their pages, and many developers find forms just plain boring. The good news is that HTML5 injects a little bit more joy into coding forms. By the end of this tutorial, we hope you’ll look forward to employing form elements, as appropriate, in your markup.
Let’s start off our sign-up form with plain, old-fashioned HTML:
<form id="register" method="post"> <hgroup> <h1>Sign Me Up!</h1> <h2>I would like to receive your fine publication.</h2> </hgroup> <ul> <li> <label for="register-name">My name is:</label> <input type="text" id="register-name" name="name"> </li> <li> <label for="address">My email address is:</label> <input type="text" id="address" name="address"> </li> <li> <label for="url">My website is located at:</label> <input type="text" id="url" name="url"> </li> <li> <label for="password">I would like my password to be:</label> <p>(at least 6 characters, no spaces)</p> <input type="password" id="password" name="password"> </li> <li> <label for="rating">On a scale of 1 to 10, my knowledge of HTML5 is:</label> <input type="text" name="rating" id=rating"> </li> <li> <label for="startdate">Please start my subscription on:</label> <input type="text" id="startdate" name="startdate"> </li> <li> <label for="quantity">I would like to receive <input type="text" name="quantity" id="quantity"> copies of <cite>The HTML5 Herald</cite>.</label> </li> <li> <label for="upsell">Also sign me up for <cite>The CSS3 Chronicle</cite></label> <input type="checkbox" id="upsell" name="upsell"> </li> <li> <input type="submit" id="register-submit" value="Send Post Haste"> </li> </ul> </form>
This sample registration form uses form elements that have been available since the earliest versions of HTML. This form provides clues to users about what type of data is expected in each field via the
p elements, so even your users on Netscape 4.7 and IE5 (kidding!) can understand the form. It works, but it can certainly be improved upon.
For the next article in the series, which involves a look at the new form attributes HTML5 provides, visit Better web forms with HTML5, Part 2.
This is an excerpt from HTML5 & CSS3 for the Real World, by Alexis Goldstein, Louis Lazaris & Estelle Weyl.