HTML5 Cookbook

Chapter 3. Forms

Kimberly Blessing

Introduction

Forms are the workhorse of any web application. Whether you are updating your Facebook status, paying a bill online, or remotely programming your DVR, forms are what make the magic happen.

Currently, making that magic both robust and seamless requires some interesting and tricky uses of HTML and JavaScript. HTML5 makes much of this work far simpler—and even where browsers aren’t yet supporting the new HTML5 form features, it’s easy to use these as building blocks and add support with JavaScript.

HTML5 gives us new elements and new attribute values for the input element to yield new form fields, as well as some new attributes that allow us to remove many lines of JavaScript. However, since not all browsers yet support these new features, it is still necessary to use some JavaScript to ensure cross-browser compatibility.

3.1. Displaying a Search Input Field

Problem

You want to present a user with a search form field.

Solution

Use the input element with an HTML5 type value of search:

<form>
    <p><label>Search <input type="search" name="query"></label></p>
    <p><button type="submit">Submit</button></p>
</form>

Discussion

The search input type displays a text input field that may visually differ from that of a regular text field, based on the stylistic conventions of the platform.

For example, Safari on Mac OS displays the search field with rounded (instead of square) corners, as shown in Figure 3-1. Both Safari and Chrome display an icon within the field ...