HTML5: Up and Running

Search Boxes

OK, this one is subtle. Well, the idea is simple enough, but the implementations may require some explanation. Here goes....

Search. Not just Google Search or Yahoo! Search. (Well, those too.) Think of any search box, on any page, on any site. Amazon has a search box. Newegg has a search box. Most blogs have a search box. How are they marked up? <input type="text">, just like every other text box on the Web. With HTML5, we can fix that:

<form>
  <input name="q" type="search">
  <input type="submit" value="Find">   
</form>

In some browsers, you won’t notice any difference from a regular text box. But if you’re using Safari on Mac OS X, it will look like Figure 9-14.

Figure 9-14. A search box

Can you spot the difference? The input box has rounded corners! I know, I know, you can hardly contain your excitement. But wait, there’s more! When you actually start typing in the type="search" box, Safari inserts a small “x” button on the right side of the box. Clicking the “x” clears the contents of the field. (Google Chrome, which shares much technology with Safari under the hood, also exhibits this behavior.) Both of these small tweaks are done to match the look and feel of native search boxes in iTunes and other Mac OS X client applications (Figure 9-15).

Figure 9-15. A ...