Isn’t it nice when web developers make it easy for end users to fill out a form? One way to make for a pleasant user experience is to offer suggestions on a form’s input field. HTML5 now has a cool feature that makes this easier for the developers too!
The HTML5 datalist element provides an “autocomplete” feature on form elements. With it, you can provide a list of predefined options to the user as they input data.
Now, when a user is entering some text into a text field, a list can drop down with pre-filled values for them to choose from.
How to Make a datalist for a Form Field Input Element
The datalist tag was introduced in HTML 5.
Use the ID of the datalist tag to associate it with the appropriate input.
For example, if the datalist tag has an id=”myDataList”, then the list attribute of the input element will look like this: list=”myDataList”.
You can fill the datalist element by nesting option tags inside the datalist tag. Here is an example of the code for the HTML5 datalist element:
OK, so now you know. Go be nice to your users with the HTML5
How can I use a predefined value for the input field ?
The following does not work.
Hi Lurchi,
Use the placeholder attribute. I will add it to the example above.