How to refer to a element that contains pre-defined options for an element in HTML?

HTML Web Development Front End Technology

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>