HTML5 Tutorial: Using a Datalist to Suggest Values for an Input Control
Improve your website forms with HTML5
Many new features in HTML5 make it a lot easier to create user-friendly forms in HTML5. The new datalist element in HTML5 allows you to suggest input values to the user. For example, if the user has to type the name of a country then the input control can suggest some country names as soon as the user has typed in some characters.
The suggested values are shown in a drop-down box below the input control. This used to take many lines of code in earlier versions of HTML because you had to create that drop-down box yourself entirely. It is much easier in HTML5 because you only have to tell the browser the values it can suggest. The browser will then take care of the rest.
In this tutorial I'll show you how to use a datalist to suggest input values to the user and I'll give several practical examples.
Example 1: Using a datalist with options
<label>First name: <input list="names"/></label> <datalist id="names"> <option value="Barbara"> <option value="Deborah"> <option value="Karen"> <option value="Linda"> <option value="Lisa"> <option value="Mary"> <option value="Susan"> </datalist>
We have an input control where the user can enter a first name. We don't need to specify that the input control will contain text with type="text" because text is the default value for type in HTML5.
The list attribute is new in HTML5 and it allows you to link an input control to a datalist. The list attribute contains the id of a datalist element in that document.
The datalist element is also new in HTML5 and it can contain option elements. Each option element has an attribute value. In our example we have an option for each first name.
When the user types a character the browser will show the relevant names. For example, if you type in B or b then it will show a drop-down box below the input control with Barbara. The user can then select Babara which will be placed in the input control as if the user had typed it in himself. This saves the user some time and it prevents typing errors.
The suggested values depend on the web browser
Please note that the suggested values depend on the web browser.
For example, Firefox shows all values that contain what the user typed in (so 's' shows Lisa and Susan) but Opera shows all values that start with what the user typed in (so 's' shows only Susan).
Keep in mind that this is a basic way of giving suggestions to visitors of your website but don't rely on it that certain values will be shown when you type something in.
Example 2: Options with a label and a value
<label>Email: <input type="email" list="emails"/></label> <datalist id="emails"> <option label="Barbara Johnson" value="email@example.com"> <option label="Lisa Johnson" value="firstname.lastname@example.org"> </datalist>
We can take this idea one step further by adding labels to the options.
In the previous example the suggested value would be placed in the input control but you can also enter a different value in the control. You can do this by having both a label and a value.
The label is shown as a suggestion to the user but the value is actually put in the input control when the user selects that suggestion. In some browsers both the label and the value are shown as suggestion.
In this second example we have an input control where you can enter an email address (note that type="email", also a new addition in HTML5). The user can type in the name of a person and, when selected, the email address of that user will be put in the input control.
You can show an option again by removing the attribute disabled:
Learn web design
Did you like this tutorial?
Use the Share button below to share it with your fellow web developers!
More by this Author
In this tutorial I'm going to demonstrate how to use the canvas element in HTML5 to draw colorful graphics for your website. The tutorial features two rich examples which are explained step by step.
We can convert a HTML5 canvas image into a base64 representation and we can display such base64 image data if we wish using a few lines of code. This tutorial shows you how and also discusses some possible applications...
Drawing circles and arcs in HTML5 can be quite a challenge. In this tutorial I explain how to draw circles and arcs and how the angles of arcs are measured. This tutorial contains many examples.