Web Forms with HTML5

In my last column, I discussed HTML5 support for offline storage and caching through the use of LocalStorage and SessionStorage. Continuing with the HTML5 focus, I want to investigate the new declarative form input types along with new attribute support. These new form features were the genesis of what eventually became the HTML5 specification. And, for those writing data-centric Web applications, these new features provide a significantly improved experience both for the Web programmer and the end user.

No JavaScript Required 
To outline the new form features of HTML5, consider the form for entering contact information into a Web page, as shown in Figure 1.

[Click on image for larger view.]

Figure 1. HTML5-implemented form features.

Clearly, there's nothing particularly fancy about this form from the user perspective -- until you consider that it's implemented entirely in HTML5 -- no JavaScript required. For the remainder of the article, I'll enumerate each of the features highlighted in Figure 1, breaking the features down as either new HTML5 attributes or new type values on the input element.

Input Element Attributes
Before I look at the new HTML5 input types, let's consider some of the new attributes available for the input element.

Placeholder Perhaps the most visible attribute is the placeholder attribute, which adds a hint that describes the expected value of the text entered into the input textbox (the hint appears when the textbox is empty and disappears when the control gets focus or data is entered):

<form action="#">
  <input type="text" name="firstName" 
    placeholder="First name" /><br />
  <input type="text" name="lastName" 
    placeholder="Last name" /><br />
  <input type="submit" value="Submit" />
</form>

Prior to HTML5 support, placeholder implementation required implementations of the onfocus and onblur events. With HTML5, placeholder values can be added to any text input type or one of the new HTML5 input types, including search, url, tel and email.

The Pattern Attribute Another extremely valuable HTML5 input element attribute is the pattern, the code for which is shown here:

<form action="#">
  <input type="text" name="website" pattern="https?://.+" 
    title="A URL such as http://www.intelliTect.com">
  <input type="submit" value="Submit" />
</form>

This attribute enables the specification of a regular expression check against the value entered. Text entered by the user is required to match the regular expression; if it doesn't, form submission is blocked and an error message is displayed describing the problem.

Unfortunately, the out-of-the-box pattern attribute doesn't prevent the invalid characters from being entered in the first place, even for simple patterns like when only digits are allowed ("\d+"). In other words, even with a numeric restriction, it's possible to enter non-numeric characters even though the field won't validate successfully when the form is submitted. In fact, the default behavior is to clear the data from the input entry if it doesn't match the pattern specified, either when the input element loses focus or when submitting the form. Using the required attribute mentioned in Table 1 will prevent the form submission and instead display the error message

Datalist Using the new list attribute, HTML5 includes support for a "combobox" control where the input element not only allows for single-line text entry, but also provides a list of items to select from (see Figure 2):

[Click on image for larger view.]

Figure 2. The datalist attribute enables HTML5 support for a combobox.

<form action="#">
  <input type="text" name="characters" 
    list="characterList">
    <datalist id="characterList">
      <option value="Inigo Montoya"/>
      <option value="Princess Buttercup"/>
      <option value="Prince Humperdink"/>
      <option value="Fezzik"/>
    </datalist>
  <input type="submit" value="Submit" />
</form>

In Figure 2, the possible options to select from are hardcoded, but this list could obviously be loaded dynamically. The end result is a textbox with possible "suggested" values; the list of possible values displayed filters down to match whatever text is entered.

Additional New HTML5 Attributes Additional input element attributes to consider are shown in Table 1, although these don't generally have a user visible aspect associated with them.

Description Code autocomplete Modern browsers support autocomplete, by which previous values against input elements with the same attribute name appear with IntelliSense-like behavior. By default, autocomplete on an input element inherits from the form's attribute, which defaults to "on." By setting the autocomplete attribute to off, the browser no longer retains previous values, thereby not exposing sensitive information. <form action="#"> <input type="text" name="firstName" autocomplete="off" placeholder="First name" /><br /> <input type="text" name="lastName" placeholder="Last name" /><br /> <input type="submit" value="Submit" /> </form> min/max Used in conjunction with the number and date/datetime/time input type elements, min and max provide maximum and minimum validation of the data they're associated with. Note: These attributes don't have any effect when used with the text element type. <input type="number" name="age" placeholder="Age" min="0" max="120" /> step Like min/max, this attribute is intended for the number, date/datetime/time type input elements. Browsers that support this attribute generally provide a spinner control to the end of the input textbox and allow the value to be incremented/decremented by the step value. <form action="#"> <input type="number" name="generation" placeholder="Age" min="0" max="120" step="10" /><br /> <input type="submit" value="Submit" /> </form> required Forces an input element to be filled in before submitting a form. <form action="#"> <input type="text" name="firstName" required placeholder="First name" /><br /> <input type="text" name="lastName" required placeholder="Last name" /><br /> <input type="submit" value="Submit" /> </form> autofocus Placed uniquely on an input element, the autofocus attribute identifies which input element to place the focus on by default when the form loads. <form action="#"> <input type="text" name="firstName" placeholder="First name" /><br /> <input type="text" name="lastName" autofocus placeholder="Last name" /><br /> <input type="submit" value="Submit" /> </form> multiple Targeted toward selecting multiple files at once, rather than just a single file -- multiple is available in conjunction with other input types by separating individual values with a comma. <form action="#" method="post"> <label>Select images:</label> <input type="file" name="images" multiple /> <input type="submit" /> </form> Table 1. Additional New HTML5 Attribute

This list of new input type attributes is a welcome set of additions to its HTML base -- providing lots of functionality that was previously only available via JavaScript. Next, I'll take a look at how these come into play with a new selection of input type values.

Input Types
First, consider that all the controls are input types. As such, they're fully backward-compatible with non-HTML5-supporting browsers. This is implemented through the addition of new values for the input element's type attribute. As a result, all browsers, even legacy ones, are able to accommodate the additional types even if they don't yet support HTML5 explicitly. In fact, as is true for several browsers, it's possible for only a subset of the new HTML5 types to be implemented (several of the current browsers don't support color, for example). If a particular input type isn't supported, browsers will gracefully downgrade to use type text.