Form Features in HTML5

HTML5 forms improve on HTML 4 forms through the addition of the following 13 new types of input controls:

These new input types offer a major improvement to authors: in the case of any of the new types that have a special user interface associated with them, the user interface is handled natively by browsers, instead of requiring authors to write their own Javascript code or use Javascript libraries. For example, for color input, the browser generates a color picker that allows users to select a color by pointing and clicking; for date input, the browser generates a calendar picker. Providing users with a GUI control for those kinds of input types also provides a built-in (as opposed to bolt-on) mechanism to ensure that users can only enter valid values.

The big improvement for end users is also the provision of that kind of automatic client-side validation—to either ensure that users can’t input invalid data to begin with, or to quickly alert users when they do. (In HTML5 form implementations, client-side form validation is always on by default, and can only be turned off by a user option in the browser or by a page author explicitly setting a formnovalidate attribute on the entire form or on a specific control.)

The required attribute is a new form-related HTML5 feature whose purpose is relatively simple yet very powerful. Specifying required on an input or textarea element in a particular form indicates that users must provide a value for that element in order to submit the form.

For the case where proper processing of a form requires that certain fields have nonempty values such as the name field in an account-creation form, it’s necessary to check the form contents and alert users when they attempt to submit the form with empty values for those fields. That checking is currently done in one of two ways. The first way is to do the check on the server side after the user submits the form; this is suboptimal because it means an extra network pass, and extra time for the user. The second, better way is to do the checking on the client side, before the browser sends the form to the server. However, the current downside is that this requires authors to do the checking using custom Javascript code or a Javascript library of some kind.

Enter the required attribute. The benefit of the required attribute to you as an author is that it eliminates the need to rely on Javascript code to do client-side checking of form fields for which values are required. Instead, all you need to do is set the required attribute on the form field, which causes the browser to automatically do the checking.

The benefit of the required attribute to end users is that it can save them time and trouble; it also gives them a consistent user experience, across all web applications, for being alerted in the case of a form with missing values for required fields. It also enables them to get localized “missing form value” messages from their browsers in their preferred languages (instead of being limited to the language a particular web application uses for its error messages).