HTML and CSS Reference
In-Depth Information
attempt to do just that. Remember, though, that not all browsers support these new input types.
Additionally, browser support for a particular input type may differ in terms of the control's user interface
and validating capabilities.
As with other features of HTML5, it's recommended that you check browser support for the new input
types using the Modernizr library. Listing 5-5 shows some sample jQuery code that checks whether the
email input type is supported by the browser.
Listing 5-5. Checking Support for the New Input Types
$(document).ready(function () {
if (!Modernizr.inputtypes.email) {
alert("This browser doesn't support email input type of HTML5!");
}
});
n Note If a browser encounters an input type that it can't recognize, a normal text box is rendered. As of this
writing, Chrome and Opera are leading as far as support of the new input types is concerned. Hence, all the input
types discussed in the following sections are illustrated using either Chrome or Opera.
Note that individual browsers may perform the validations based on the input types bit differently. For
example, Firefox highlights the <input> field containing an invalid value as soon as you leave the field.
Chrome and Opera, on the other hand, don't give such instant visual feedback. All browsers, however,
perform the validations when the form is submitted. At that time, the browser displays an error message (if
any) for the first <input> field in error, and that input field gets the focus. Consider, for example, a form
with three <input> fields, the first two of which contain invalid values. When such a form is submitted, the
browser displays the validation error message for the first input field, and the first input field gets the
focus. Only when a valid value is entered in the first input field is the validation error message for the
second input field displayed. If there are any validation errors, the form isn't submitted.
The following sections discuss the new input types offered by HTML5. Remember that all the HTML
4.01 input types are available and can be used as before.
E-mail Addresses
E-mail addresses are commonly used on web sites for variety of reasons ranging from user registrations to
contact forms. You can accept e-mail addresses using the email input type. Listing 5-6 shows how the
email input type is used.
Listing 5-6. Using the email Input Type
<span>Enter your email address :</span>
<br />
<input id="email" type="email" />
<br />
<input type="submit" value="Submit"/>
As you can see, the type attribute is set to email . If you try to enter an invalid e-mail address, the
browser displays an error message (see Figure 5-2).
 
 
Search WWH ::




Custom Search