In the first article in this series we looked at the history of HTML5 forms and many of the new attributes available to us.In this second and final part of the series, we’ll look at the new input types available in HTML5. This is article is an excerpt from Chapter 6 of Beginning HTML5 and CSS3: The Web Evolved by Christopher Murphy, Oli Studholme, Richard Clark and Divya Manian, published by Apress.
HTML5 introduces no less than a baker’s dozen (yes, that’s 13! We’re going to take a brief look at each of them and explain why you should be using them right now.These new input types have dual benefits: using them means less development time and an improved user experience.The new input types we’ll be looking at are: Search seems like an appropriate place to start our foray into HTML5 input types.When we talk about search, we’re not just talking about Google, Bing, or Yahoo.We’re talking about the search field on that e-commerce site you just made a purchase from, on Wikipedia, and even on your personal blog.
It’s probably the most common action performed on the Web every day, yet it’s not marked up very semantically, is it?We all tend to write something like this: With HTML5 we can. Desktop browsers will render this in a similar way to a standard text field—until you start typing, that is.At this point, a small cross appears on the right side of the field. This lets you quickly clear the field, just like Safari’s built-in search field., notice the keyboard, specifically the action button on the keyboard (bottom right).Did you spot that it says “Search” rather than the regular “Go”?It’s a subtle difference that most users won’t even notice, but those who do will afford themselves a wry smile.