HTML and CSS Reference
In-Depth Information
Remember that the new input types in HTML5 are derived from the solutions that
developers have been creating with HTML and JavaScript for quite a while. This means
it is fairly easy to find UI libraries that provide substitute functionality for browsers that
do not yet support HTML5 forms.
In the future, when all of your users have upgraded to browsers that support HTML5
elements, input types, and attributes, you'll be able to quickly and easily remove the
scripts without needing to change your markup.
See Also
For a list of fallback solutions or polyfills, see
wiki/HTML5-Cross-browser-Polyfills .
3.14 Validating Form Data in Older Browsers with JavaScript
You want to validate form data in browsers that do not support HTML5.
Use the Modernizr JavaScript library (see ) to detect support
for specific HTML5 attributes and script alternate solutions when features are not
supported. (Refer back to Recipe 3.13 , for information on Modernizr and other Java-
Script libraries.)
Save Modernizr locally and call it in the head of your document. We'll also call jQuery
(see ) to make it easy to reference the form element and to attach
an event handler:
<script src="modernizer.js"></script>
<script src="jquery.js"></script>
Code your form using HTML5 form validation attributes, such as required and pattern :
<p><label>Username <input type="text" name="username" required></label></p>
<p><label>Password <input type="password" name="password" required
pattern="[0-9a-zA-Z]{12}" title="Must be 12 alphanumeric
<p><button type="submit">Submit</button></p>
Search WWH ::

Custom Search