Creating cross-browser enhanced HTML5 forms

Profit the new HTML5 attributes

Currently the code aims to support the following new HTML5 input types color, range, search, number, email, url, date, time, week, datetime, datetime-local and most of the new standard HTML5 form attributes like autofocus, required, placeholder and pattern on different control elements and add support for the maxlength attribute on <textarea> elements (already supported by HTML4 on <input> elements).

The objective is to allow authors to use most HTML5 control types and attributes even in browsers which do not yet support all these new HTML5 features. Some of these features are only implemented in the latest version of Opera and partially in Webkit based browsers. To achieve this we need the ability to recognize and handle correct validation for these new types and be able to set:

• autofocus attribute for <input>, <select> or <textarea> elements
• required attribute for <input>, <select> or <textarea> elements
• placeholder attribute values for <input> or <textarea> elements
• pattern attribute values for <input> elements
• data-regexp attribute values for <input> elements (non standard)

The autofocus and required attributes are of type boolean (true/false). The following are three different methods of including boolean attributes in the HTML code, I would reccommend you use one of the first two methods but I know picky browsers exists:

• <input required> only using the name of the boolean attribute
• <input required=""> setting its value to be an empty quoted value
• <input required="required"> using the attribute name as the value

There may be more than one autofocus element for each form in the page, however only the last autofocus element (in document order) will be focused after the form initialization has completed.

The example placeholder value:

• must not be included in parameters with form submission
• should be visually removed when user gives focus to the field
• should be visually different, suggesting it is only an example value
• should be returned if no value is provided and after the field is blurred
• should be applied after the browser has retrieved prior submission values

The validation pattern value:

• must match the field value before the form can be submitted
• should be visually accessible through the same field title attribute
• should be visually different when focused, suggesting the field is mandatory

The code is just baked so it surely need more testing and tweakings for various browsers.

• HTML test and example courtesy by @ls_n (Luke Smith)
• Initial Javascript helper code by @rem (Remy Sharp)
• Testing and support by @mathias (Mathias Bynens)
• Suggestions on html5 by @miketaylr (Mike Taylor)
• Ideas and more testing @digitarald (Harald Kirschner)

Known Limitations

• in very old browsers the maxLength attribute will also limit the length of the visible placeholder text
• there is no way to type exactly the same placeholder strings in the fields but shouldn't be a problem
• to debug this code it is highly suggested not to use alert() since it affects focus/blur states