Chapter 3. Forms

Kimberly Blessing


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


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


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

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


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

Get HTML5 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.