Sometimes, we want to add a HTML select drop-down with an input field.
In this article, we’ll look at how to add a HTML select drop-down with an input field.
How to add a HTML select drop-down with an input field?
To add a HTML select drop-down with an input field, we use the datalist
element.
For instance, we write
<input type="text" name="city" list="cityname" />
<datalist id="cityname">
<option value="Boston"></option>
<option value="Cambridge"></option>
</datalist>
to add an input with the datalist element.
We set the list attribute of the input to the same value as the id attribute of the datalist element to show the datalist’s values under the input when we type in the input.
Conclusion
To add a HTML select drop-down with an input field, we use the datalist
element.