Form Mastery - HTML5 Mastery: Semantics, Standards, and Styling - page 149

Search input
The search input type is the simplest of the new types added in HTML5. Depending
on the browser, it may be indistinguishable from a regular text input type control. So,
why is it there? This is an addition added primarily for semantic reasons. Setting a form
input type to search separates that field from other text fields on the page. In the fu-
ture, this may be used to apply functionality or behavior expected of a search field. For
instance, Safari currently adds an x button to the right of the search field that clears any
text typed in the field ( Figure 4-14 ). This is consistent with how the built-in web search
field in the toolbar behaves.
Figure 4-14. Safari provides a button for clearing the search by default on search input types.
Personal details: e-mail, phone, and website URL inputs
Like the search input type, the last three input types— email , tel , and url —are
just text fields with additional semantic meaning attached. They even look like regular
generic text input fields ( Figure 4-2 ) , but under the surface, they have a special quality
that will save you a lot of time fiddling with scripts on your page. They are great ex-
amples for showcasing a new feature in HTML5—built-in form validation! Let's get to
that next.
Validating and submitting forms
I mentioned in passing when discussing the form element that there is an attribute
called novalidate that can be added to a form to bypass a number of validation
rules that would otherwise be checked on the input. It's like dialing back the form to the
old days. I merely mention its existence should you want to do that, but let's look at what
these validation rules are about instead.
Take the email input type; it provides the semantic meaning that whatever text is
entered into it will be in the form of a valid e-mail address. This is something that the
web browser can check when the form is submitted. If the entered value is not a prop-
erly formed e-mail address, the browser can throw up an error message to tell the user
to enter a correct value ( Figure 4-15 ) .