O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a search field

Another of the many new input types that HTML5 supports is search. How many times have you built a form using <input type="text" /> intending to allow the user to search the site? Now we can use something much more semantic.

How to do it...

Let's build a quick search field using the placeholder attribute too. By now you're familiar with this outdated approach:

<form>
<input name="something" type="text" value="keyword" />
<input type="submit" value="Search" />
</form>

We've all done that a million times, right? Well, let's try this on for size instead:

<form>
<input name="something" type="search" placeholder="keyword" />
<input type="submit" value="Search" />
</form>

Spot the differences? Our type has changed from text to ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required