Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to refer to a
The HTML <datalist> tag is used to add autocomplete functionality to form elements. It offers customers a set of predefined options from which to choose data. A "list" attribute containing "input" element should be used with the "<datalist>" tag. The datalist id and the value of the "list" attribute are related.
Following are the examples…
Example
In the following example we are using datalist to allow pre defined option for the user.
If you press A, it will show a list of cricketers starting with A letter.
<!DOCTYPE html> <html> <body> <label> Enter your favorite cricket player:<br /> <input type="text" id="players" list="Players"> <datalist id="Players"> <option value="MSD"> <option value="Virat"> <option value="Sangakara"> <option value="Sehwag"> <option value="Watson"> <option value="Raina"> <option value="Hussey"> <option value="ABD"> </datalist> </label> </body> </html>
Output
On executing the above script, you will come up with a data list containing different players, and if you press any alphabet, it will list down the names that contain the alphabet that was pressed.
Example
Another example can be seen as −
<!DOCTYPE html> <html> <head> <title>HTML Datalist Tag</title> </head> <body> <input list = "tutorials" /> <datalist id = "tutorials"> <option value = "Java"> <option value = "ASP"> <option value = "PHP"> <option value = "Ruby"> <option value = "jQuery"> </datalist> <p>Try to add any of the tutorial name mentioned above.</p> </body> </html>
Output
The output obtained after executing the script above is as follows −
Example: Date and Time Types
Using the datalist tag, selecting the types like month, date, time, local time etc will be made easier to choose from the dropdown list.
<!DOCTYPE html> <html> <head> <body> <input type="time" list="Hours"> <datalist id="Hours"> <option value="10:00"> <option value="11:00"> <option value="12:00"> </datalist> </body> </head> </html>
Output
The output obtained after executing the above script is as follows −
Example: Range Types
Using the datalist tag, selecting the values in a particular range will be made possible using a slider represented using multiple hash marks at each recommended value.
<!DOCTYPE html> <html> <head> <body> <input type="range" list="tickmarks"> <datalist id="tickmarks"> <option value="0"> <option value="10"> <option value="20"> <option value="30"> </datalist> </body> </head> </html>
Output
The output obtained after executing the above script is as follows −
Example: Color Types
The datalist tag allows a user to pick a predefined color from a list of various colors.
<!DOCTYPE html> <html> <head> <body> <input type="color" list="Colors"> <datalist id="Colors"> <option value="#000000"> <option value="#FFFFFF"> <option value="#FFF000"> <option value="#A11112"> </datalist> </body> </head> </html>
Output
The output obtained after executing the above script is as follows −
Example: Password Types
The datalist tag allows a user to pick a randomly generated password from a list of various passwords. But no browser usually prefers it due to security reasons.
<!DOCTYPE html> <html> <head> <body> <input type="password" list="randomPassword"> <datalist id="randomPassword"> <option value="5Mg[_3DnkgSu@!q#"> </datalist> </body> </head> </html>
Output
The output obtained after executing the above script is as follows −
298 Views
