How To Use the HTML5 Datalist Element

Introduction

You can give your text inputs a little boost using the <datalist> element. It’s a bit like a blend of <input> and <select>. This article will outline how to use it.

Prerequisites

• A general knowledge of HTML5. For a comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.

Using the <datalist> Element

This is how you can use the <datalist> element in your HTML5 markup:

<label for="favorite-band">Your favorite band?</label>
<input list="fish"
name="fish-choice" id="fish-choice>" />

<datalist id="fish">
    <option value="Shark">
    <option value="Tuna">
    <option value="Ulua">
</datalist>

Conclusion

The <datalist> element is a useful feature of HTML.

For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.