If you were using Internet Explorer 6 or 7 on a Windows machine or Opera 9, this demo would actually work!
Date and time types
Range control
Calculated fields
Prefilling forms
Roundtripping data
Input mode


A datalist is a drop-down list of possible values for a text field. The difference between a datalist and a select-element, is that the user is not required to select one of the options, but can write anything in the field.

The code for the field looks like this

<input type="text"  list="uris">

The list-attribute refers to the ID of a datalist element. The datalist element looks like this:

<datalist id="uris">
 <option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045">
 <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">

The value attribute contains the text which will be inserted into the field. The label attribute may contain additional info about the option, but will not be inserted.

Here is a datetime field with a datalist.

The HTML look like this:

 <input type="datetime-local" list="datetimes">
 <datalist id="datetimes">
 <option value="1971-03-10T10:22"></option>
 <option value="1973-03-10T13:44"></option>

Note that option values has to be supplied the same format which is legal for the field, although in the case of date and time types the user interface will display the options in a more user friendly format.