To create an input
field that has a related dropdown list, you need to:
- Create a
<datalist>
element with anid
, and a set of<option>
elements that represent options to choose from; - Create an
<input />
element with thelist
attribute that matches theid
of the<datalist>
element.
For example:
<input type="text" list="countryName" placeholder="Country Name" />
<datalist id="countryName">
<option value="Germany">
<option value="United Kingdom">
<option value="United States of America">
<!-- ... -->
</datalist>
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.