Working With Forms in HTML5

Image may contain Text Label Word Page Number Symbol and Menu

The HTML5 specification adds a new set of tools for handling web forms. Generally referred to as HTML5 Forms, the new tools enable browser-side form validation.

It’s important to understand that HTML5 Forms are not meant as your sole means of validation. You still need to do server-side validation and, of course, sanitize the user’s input before you store anything in a database.

In fact, HTML5 form validation is less validation and more, as developer Mounir Lamouri puts it, “like an adviser guiding you in filling the form.” In other words, HTML5 forms provide a quick means of very basic validation to let users know about errors before they submit the form.

The new forms spec is essentially designed to replace any JavaScript validation tools you might be using now — for example, ensuring that required fields are filled in or that a tel field actually contains a telephone number.

Lamouri has written a good basic overview of how to use HTML5 forms in Firefox 4, one of the few browsers that supports most of the Forms spec. WebKit browsers are a little behind but still support some of the spec.

Obviously, with very limited browser support at this point, HTML5 forms aren’t ready for prime time. But if you’d like a glimpse of what’s coming, Lamouri’s overview makes a great introduction. If you’d like to experiment with the tools outlined in Lamouri’s post, you’ll need to grab a copy of Firefox 4 beta 7.

For further reading on HTML5 forms, be sure to check out the forms chapter in Mark Pilgrim’s Dive into HTML5, available for both online and offline browsing.

See Also: