URL: https://www.progressiverobot.com/html-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

datalist illustration for: Prerequisites

Using the <datalist> Element

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

				
					
&lt;label for="favorite-band"&gt;Your favorite band?&lt;/label&gt;

&lt;input list="fish"

name="fish-choice" id="fish-choice&gt;" /&gt;



&lt;datalist id="fish"&gt;

    &lt;option value="Shark"&gt;

    &lt;option value="Tuna"&gt;

    &lt;option value="Ulua"&gt;

&lt;/datalist&gt;

				
			

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.