HTML5 Training (Web Forms 2.0)

A greatly welcomed addition to the HTML5 spec are new input types, allowing future versions of browsers to validate certain input without having to use Javascript as well as providing users with soft-keyboards a more specialized keyboard layout.

general input types

The email input field provides the user with a soft-keyboard with a layout that highlights buttons that are required to enter email addresses most often:

The numbers input field, like the email input field, provides a specialized keyboard, this one focusing on number entry:

The URL input field, like its siblings, provides direct access to the most required buttons when entering URLs:

All above buttons will, eventually, be validated by the user's browser and will not require Javascript anymore but as of this moment, the biggest advantages are that users with soft-keyboard get input-specific button layouts and that Javascript validation does not have to rely on a specific (CSS) ID or class anymore but can utilize the type attribute.

specialized input types

Next to the above mentioned input types, HTML5 also adds support for the placeholder, autofocus and search input types.

As the name suggests, the placeholder type provides developers with the possibility to include a placeholder in the input field, thereby enabling the site manager to provide succinct instructions on the data that is expected to be entered in a given input field.

The search input field provides the user with the ability to delete the contents of a single field by clicking the X in a small greyish circle that appears as soon as the user starts to enter data. This features makes the most sense on mobile devices, where keyboard space is at a premium and deleting large amounts of field data is cumbersome.

The autofocus input field provides developers with the possibility of automatically setting the focus on a certain input field. This was done in the past by utilizing Javascript functions which usually would only fire once the page was fully loaded. Depending on the size of the page, this firing could trigger at an inopportune moment.

Support

Support for enhanced forms is widely available in recent versions of Firefox, Safari and Chrome, with Internet Explorer 8.0 having added support for it as well.