New Form Elements in HTML5 is part 4 of Beginner’s Guide to HTML5.
New Form Elements:
You probably have experienced this kind of response somewhere on the Web: when you are typing in an input form, a list of suggestions appears at the bottom of the input.
The datalist contains option elements much like the select element, though datalist itself is not an independent control. Instead it is added or attached to an element using the list attribute. Consider the following markup:[code language=”html”] control with an id and the new list attribute. This tells the browser to load the list of values or suggestions from the datalist element with a corresponding id.
Then comes the actual datalist element with the aforementioned id and a collection of option elements. This is how the values are attached to the input control.
When we run this in the browser, we will see a normal textbox, then when we starting typing (or press the down arrow key, which works in Firefox and Chrome but not in Opera) the complete or filtered list appears. As we type, only the relevant options will be shown, much like how Google’s Search box displays suggestions. Be aware though, slight behavioural variations do exist from browser to browser.
To hook the[code language=”html”]
autofocus: This Boolean attribute lets you specify that the control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.
challenge: A challenge string that is submitted along with the public key. Defaults to an empty string if not specified.
disabled: This Boolean attribute indicates that the form control is not available for interaction.
form: The form element that this element is associated with (its form owner). The value of the attribute must be an id of a