HTML5: Up and Running

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 ...