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="bjohnson@example.com"> <option label="Lisa Johnson" value="ljohnson@example.com"> </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.
Example 3: Using JavaScript to enable / disable suggestions
<label>Fruit or vegetable: <input type="text" list="fruit_vegetables" onkeypress="onUserInput(this);"/></label>
<datalist id="fruit_vegetables">
<option id="option_apple" value="Apple">
<option id="option_lemon" value="Lemon">
<option id="option_lime" value="Lime">
<option id="option_peach" value="Peach">
<option id="option_pear" value="Pear">
<option id="option_waterlemon" value="Watermelon">
</datalist>
<script type="text/javascript">
var apple = document.getElementById("option_apple");
apple.setAttribute('disabled', 'disabled');
</script>More JavaScript
- Javascript Form Validation
Validate your forms with JavaScript. - HTML Boolean Attributes and JavaScript
Boolean attributes in HTML in combination with JavaScript.
In this example we use JavaScript to hide some suggestions so that they are not shown to the user. The value Apple is disabled by JavaScript and it is not suggested when the user types something in.
We have given each option a unique id so that we can refer to it in JavaScript. We need to set the attribute disabled for an option to make sure it is ignored when looking for suggestions. In this case we set the attribute to the value disabled with setAttribute (which expects the name of an attribute and the new value). You can use this approach to programmatically show or hide suggestions to the user.
You can show an option again by removing the attribute disabled:
apple.removeAttribute('disabled');More information
Join HubPages today to earn money online!
This article was written by Simeon Visser. I am earning money online by writing here at HubPages.com. Would you like to earn money online as well? Read the success stories and sign up today to get started!
Learn web design
Did you like this tutorial?
Use the Share button below to share it with your fellow web developers!
