What is Difference Between Select and Datalist?

The article represents the key difference between Select and Datalist and emphasize on related best practices.

Following are key differences

• Select is an form input type while Datalist isn’t
• Select input element presents options for the users from which they need to select one of them. On the otherhand, Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value.
• With Select, users may have to scan a long list for selecting one of the values, while with Datalist, the values are provided as hints and users ain’t bound to those values. They could rather provide their own inputs.

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<select name="fav-choc" id="frmFavChocolate">
  <option value="white">
  <option value="milk">
  <option value="dark">
</select>

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

…

[adsenseyu1]