Developer Checklist — JavaScript Appendices

Correct code

JS_F_AA1: Where form fields require a specific format or range of values, contextual help-text can be programmatically inserted directly after the field it relates to, using functions of the DOM

This example shows how contextual help information can be provided, to assist users in completing a form, where specific values or formats are required.

The help information should be added in the DOM, and inserted immediately after the field it relates to, so that a logical reading-order is maintained. The element itself should be a <label> with its for attribute pointing to the field, and should preferably have an inner <em> around the actual text, to provide semantic emphasis compared with ordinary labels.

Live Demo

Click or Tab through the fields below, and you'll see how some of them have contextual help information, which appears in a message tooltip to the right of the field it relates to:

JavaScript Code

The JavaScript code for this example can be found in: JS_F_AA1.js

The CSS for this example can be found in: JS_F_AA1.css