JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

HTML5 – Datalist Vs Select Tags

March 13, 2014 by Krishna Srinivasan Leave a Comment

In our previous tutorial I have explained HTML5 Datalist with a simple example. If you are a novice HTML programmer, then you would have a confusion on difference between <datalist> and <select> elements. The reality is that, both are used for the entirely different purposes.

Datalist Tag

This tag is used for suggesting the possible values from the large array of values relevant to that filed. This element is a text field. Normally this field would have larger array where user can choose the values by typing the part of the words. Also user can input their own value instead of selecting from the list. This element is newly introduced as part of the HTML5 specification. Unlike in the select element, datalist can have only one value, it can not have two values like one for label and another one for real value of that selection.

Select Tag

This is old tag from the previous versions, this helps to list down the only valid value for that field. User won’t have privilege to input their own value. It imposes the valid values and asking user to select any one from the list. Select list can have label and value which can be different each other.

The above definitions would make things very clear for you. If I would write down a simple example in the below section with screenshots, that should be perfect for understanding the difference between datalist and select elements.

Datalist and Select Tag example

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<title>Datalist and Select Element </title>
</head>
<body>
<h3>DataList Example</h3>
<input list= "countries">
<datalist id= "countries">
<option value= "India"></option>
<option value= "USA"></option>
<option value= "UK"></option>
<option value= "Germany"></option>
<option value= "Australia"></option>
</datalist>
<h3>Select Example</h3>
<select name="countries">
<option value= "India">India</option>
<option value= "USA">USA</option>
<option value= "UK">UK</option>
<option value= "Germany">Germany</option>
<option value= "Australia">Australia</option>
</select>
</body>
</html>
[/code]

Output…

datalist-example

 

select example

Filed Under: HTML Tagged With: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved