RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Exploring HTML 5 Forms : Page 4

One of the major initial goals of the HTML 5 effort was to update the core HTML form elements to reflect more contemporary thinking. Find out how well the HTML 5 specification has fulfilled that goal so far.


Color State

The color input type provides a means for selecting a specific color. Typically, it will be implemented as a combination of a text field that validates for color representations, whether #rrggbb, rgb (red, green, blue), or a simple named color ('green','yellow', etc.), and a widget for choosing from an appropriate color selector or well. The specific implementation for the widget will be browser dependent.

Autocomplete, List, DataList, Placeholder, and Autofocus

These are not states but rather attributes that are employed by the input control. Autocomplete on input controls (or forms in general) determines whether the browser (if it supports this capability) will retain a history of previous values for the given input name. When set to off, @autocomplete disables this feature, so that sensitive data (such as nuclear missile control codes— an example given in the spec itself) will need to be re-entered every time. So, next time you're thinking about writing your world domination interface in HTML, remember this property (especially as it normally is on by default).

The @list attribute is new to HTML 5, but its behavior is similar to @autocomplete. The @list attribute contains the @id of the <datalist> element, which in turn holds a set of <option> elements. When @list is present, it overrides the default @autocomplete behavior. Instead of showing a history of previous entries, the autocomplete box will show a set of potential default values from the indicated datalist. Think of this as being a list of potential suggestions.

Unlike the behavior of the <select> statement, the autocomplete capability is open-ended. The user can enter in values that differ from those in the auto-suggest drop-down with no problems.

The <datalist> element and its associated options are invisible. The spec is not clear about where you should place <datalist>. Should it be in the header, inline in the body, or even as a child of the <input> element (which, while logical, seems to be contradicted by the assertion that input is a null element that takes no children)?

Another improvement in HTML 5 is the introduction of the @placeholder attribute, which serves to implement what is becoming increasingly common in AJAX-enabled web pages: the grayed out placeholder text in search fields or similar applications that disappears automatically when the user clicks on the element but reappears when the entry clears. Often, this placeholder contains a short instructional phrase explaining what the user should enter, such as "Type Your Search Here." The placeholder text is not passed in to the server when the form is posted. This feature is used most notably with the <input type="search"> element, which otherwise has the same characteristics as an ordinary text field.

Finally, @autofocus is an attribute you place upon an element to indicate that when the page is loaded the element should automatically receive the focus as soon as someone starts to type. It's a Boolean value, so if you explicitly state the attribute (regardless of its value), the behavior will be enabled.

I suspect that @autofocus will cause all kinds of interesting problems, given the difficulties associated with other Boolean attributes such as the @selected attribute for options.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date