Better web forms with HTML5, Part 1

Tweet

HTML5 makes marking up forms easier on the developer and better for the user. With client-side validation being handled natively by the browser, there is greater consistency across different sites, and many pages load faster without all that redundant JavaScript.

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 label and 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.

In this tutorial we’re going to enhance this form to include HTML5’s features. HTML5 provides new input types specific to email addresses, URLs, numbers, dates, and more. In addition to those new input types, HTML5 also introduces attributes that can be used with both new and existent input types. These allow you to provide placeholder text, mark fields as required, and declare what type of data is acceptable—all without JavaScript.

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.

Learn HTML5 Online

Get all SitePoint books and courses with a Learnable membership. Start building future-proof websites that are faster, more powerful, and easier to maintain.