Data Lists in HTML 5

Another type of list you can use is a Data List. This is new in HTML5. The Data List is like a drop down list of options, only the dropdown part doesn't appear until you start typing. The items on your list then appear, allowing the user to select an item. It is only supported in Firefox and Opera, at the time of writing. Here's what it looks like before you start typing:

So it looks like just a normal text box.
However, when you click inside of the text box and type a letter, you'll see this in Firefox:

The items on your list will appear.
When you select an item, you change the value:

The HTML5 code for the above Data List is this:

<INPUT TYPE="Text" LIST="zip_codes">

<DATALIST ID="zip_codes">

<OPTION VALUE="AL" LABEL="ALABAMA">
<OPTION VALUE="AK" LABEL="ALASKA">
<OPTION VALUE="AS" LABEL="AMERICAN SAMOA">
<OPTION VALUE="AZ" LABEL="ARIZONA">
<OPTION VALUE="AR" LABEL="ARKANSAS">
<OPTION VALUE="CA" LABEL="CALIFORNIA">
<OPTION VALUE="CO" LABEL="COLORADO">
<OPTION VALUE="CT" LABEL="CONNECTICUT">

</DATALIST>

You still have an INPUT TYPE. This one is Text. Notice the LIST attribute, though. You need this to match the ID of the DATALIST tag.
DATALIST comes after the INPUT code, and has a closing DATLIST tag. For each item on your list you have a VALUE and a LABEL. The LABEL is the text that appears on the list. The VALUE is what it changes to when an item is selected. It is also the value that gets sent when the form is processed.
Note that in the Opera browser, you'll see this as soon as you click inside of the Data List:

So the VALUE and LABEL are displayed, which could be helpful.
What is not helpful is Safari's treatment of Data Lists - everything after your Data List tags will be hidden. So if you have a Submit button after a Data List, Safari users won't see it! One workaround is to put an end tag for all your OPTIONS:

<OPTION VALUE="AL" LABEL="ALABAMA"></OPTION>

The Submit button will then reappear. The Data List won't, though.
And that's it for HTML5 form elements. Try them out in different browsers, and see what works and what doesn't. Don't forget to add some CSS to liven up your form elements!

In the next section, we'll take a look at how to lay out your form elements.

Posted in: Tips,Trick,Tutorial,Web Design,Web Design 9 (HTML5 and Forms)