HTML5 Forms Pt. 2: Attributes and Data Lists
Continuing from HTML5 Forms Pt. 1, in addition to the multitude of fresh new input types, there are also additional form-specific attributes at your disposal as well as data lists, a sort of text/select hybrid.
As well as those attributes mentioned, both here and in earlier guides, there is a handful of additional attributes:
placeholder attribute can be used with text
input fields (and their text-like cousins, such as
type="number") as well as
textarea elements. It is intended as a hint, rather than a label, for which a
label element should still be used.
<label for="email_address">Email address</label> <input type="email" placeholder="firstname.lastname@example.org" name="email_address" id="email_address">
You might want focus to land on a form field when a page loads. If you think of a search engine, for example, when you land on its home page you don’t normally need to click on the search box to start typing - you can do so straight away because it already has focus. The
autofocus attribute is a quick way to achieve this effect.
<input name="query" autofocus>
A data list takes the form of a list of suggestions that accompanies a text field:
<input name="country" list="country_name"> <datalist id="country_name"> <option value="Afghanistan"> <option value="Albania"> <option value="Algeria"> <option value="Andorra"> <option value="Armenia"> <option value="Australia"> <option value="Austria"> <option value="Azerbaijan"> <!-- etc. --> </datalist>
The value of the
list attribute in the
input element (which could be any of the text-like input types) binds it to a
datalist element with the corresponding ID (“country_name”, in this example). As a user types in the text field, if what they type matches the start of anything in the data list, those matches will be shown underneath the text field as suggestions. So, here, if “A” is typed, the 8 countries beginning with “a” are displayed. If “L” is typed after “A”, the list of suggestions will reduce to just “Albania” and “Algeria”, and so on. The data sent when the form is submitted will be whatever is in the text field - it could be something selected from the list or it could be something completely different, inputted by the user.