Mobile HTML5

Chapter 4. HTML5 Web Forms

If you’re a web geek like me, perhaps the coolest new features of HTML5 are the new form features. Yes, Canvas is fabulous. SVG is wonderful. JavaScript APIs provide for targeting DOM nodes with selectors; matching with media queries; and easily adding, removing, and toggling class names all without needing to include a JS framework (if you don’t believe me, wait; we’ll cover these topics later). CSS3 enables quick prototyping of any designer’s whimsy. So, why are HTML5 forms my favorite? Because HTML5 web forms provide enhanced usability and reduced reliance on JavaScript validation.

With HTML5, we are able to do form validation and several other tricks in a more declarative way. HTML5 allows developers to provide enhanced form usability features such as validation and error messaging without JavaScript. Reduced reliance on JavaScript can reduce development and maintenance time, making our lives much easier.

For example, instead of adding a setFocus() method on onload to provide focus to a form element, we now have an autofocus attribute (which you still shouldn’t use).^[30] Instead of providing multiple JavaScript functions to require, validate, and provide focus on error to email addresses, HTML5 web forms enable labeling form controls as required, provides native validation of multiple input types (both standard types like email format, and formats the developer can define with regular expressions), and provides useful error messaging for the user as ...