What is Difference Between Select and Datalist?

July 6, 2014 by Ajitesh Kumar · Leave a comment

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.

 

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

 

Datalist Code Sample
<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>

It is considered as one of the best practice to offer suggestions during input with the help of datalist.

…

[adsenseyu1]

Ajitesh Kumar
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in UI, Web. Tagged with .