Web: HTML – Select vs Datalist

Just found an interesting tag – <datalist>, which allows to provide the list with options for user to select.

I remember while building my web application I used select options and generated the list from some source.

How it works with <datalist>:

    <input name="country" list="countries" placeholder="Country">
    <datalist id="countries">
      <option value="Afghanistan">
      <option value="Albania">
      <option value="Algeria">
      <option value="Andorra">

Found the explanation:

  • <select> element – user must select one of the provided options
  • <datalist> element – it’s only the list with suggestions, but user can enter anything

With <datalist> I can enter anything in there:

So, <select> = Requirement vs <datalist> = Suggestion


You may also like...

Leave a Reply

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