The following is an extract from our book, HTML5 & CSS3 for the Real World, 2nd Edition, written by Alexis Goldstein, Louis Lazaris, and Estelle Weyl. Copies are sold in stores worldwide, or you can buy it in ebook form here.
We’ve coded most of the page, and you now know almost all of what there is to know about new HTML5 elements and their semantics. But before we start work on the look of the site—which we do in Chapter 7—we’ll take a quick detour away from The HTML5 Herald’s front page to look at the sign-up page. This will illustrate what HTML5 has to offer in terms of web forms.
Let’s dive in!
Dependable Tools in Our Toolbox
Forms are often the last thing developers include in their pages—many developers find forms just plain boring. The good news is HTML5 injects a little bit more joy into coding forms. By the end of this chapter, 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"> <header> <h1>Sign Me Up!</h1> <p>I would like to receive your fine publication.</p> </header> <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" value="CSS Chronicle"> </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.
We’ll cover all the newly added input types later in the chapter. Before we do that, let’s look at the new form attributes HTML5 provides.