And One More Thing...
In this chapter, Iâve talked about new input types and new features like autofocus form fields, but I havenât mentioned what is perhaps the most exciting part of HTML5 forms: automatic input validation. Consider the common problem of entering an email address into a web form. You probably have some client-side validation in JavaScript, followed by server-side validation in PHP or Python or some other server-side scripting language. There are two big problems with validating email addresses in JavaScript:
A surprising number of your visitors (probably around 10 percent) wonât have JavaScript enabled.
Youâll get it wrong.
Seriously, youâll get it wrong. Determining whether a random string of characters is a valid email address is unbelievably complicated. The harder you look, the more complicated it gets. Did I mention itâs really, really complicated? Wouldnât it be easier to offload the entire headache to your browser?
The screenshot in Figure 9-16 is from Opera 10,
although the functionality has been present since Opera 9. The only markup
involved is setting the type
attribute to "email"
(see Email Addresses). When an Opera user tries to submit a form
with an <input type="email">
field, Opera automatically offers RFC-compliant email
validation, even if scripting is disabled.
Figure 9-16. Opera validates type=âemailâ
Opera also offers validation ...
Get HTML5: Up and Running now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.