Categories
HTML

How to add a HTML select drop-down with an input field?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *