New With HTML5:

The release of HTML5 included several new form elements.

Form Validation

It is possible to use HTML5 to inform users if they have entered information correctly. This is known as “form validation”.

Traditionally, form validation occurred with JavaScript, but HTML5 has added this feature.

Validation helps ensure the user enters information correctly and with the correct “types” of data. Validation before submitting a form to a server reduces server load and enables users to more quickly see if there are errors in their form.

An example of form validation is the required attribute.

This is not yet supported on all browsers (i.e. Safari), so it may be necessary to also include other types of form validation (Such as with JavaScript).

Try pressing the ‘Submit’ button before entering any text.

The Date Entry Element

HTML5 includes a new data entry fields for “input elements”. One such of these is the type="date".

In browsers that do not support this type, a simple text box will be used. In those that do support it, the appearance will be dictated by the browser.

Try this in Chrome and Opera (not Firefox or Safari).

The Email Input Element

HTML5 also now includes an e-mail input type.

Try the e-mail example in Firefox, Chrome, or Opera. It will not accept your entry without it being a valid e-mail.

The Search Box Element

Another new element in HTML5 is the Search Box Element (type="search").

As with the other recent HTML5 elements we have just looked at, some will work in some browsers, and not others.

{ TODO: }

Read pages 165-168 of Chapter 07 in Duckett.


Previous section: