How to Create an Input With Dropdown Using HTML Only?

To create an input field that has a related dropdown list, you need to:

  1. Create a <datalist> element with an id, and a set of <option> elements that represent options to choose from;
  2. Create an <input /> element with the list attribute that matches the id 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.