Open In App

How to specify a list of pre-defined options for input controls in HTML5?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we specify a list of pre-defined options for input controls by using the HTML list Attribute.

Syntax:

<input list="datalist_id"/>

Example 1:




<!DOCTYPE html> 
<html
  
<head
    <title>
How to specify a list of pre-defined options for input controls? 
</title
</head
  
<body
    <h1
        GeeksForGeeks 
    </h1
    <h1 style="color:green"
How to specify a list of pre-defined options for input controls?
  
</h1
  
    <form action=""
        <label>Your Cars Name: </label
        <input list="cars"
        <datalist id="cars"
            <option value="BMW" /> 
            <option value="Bentley" /> 
            <option value="Mercedes" /> 
            <option value="Audi" /> 
            <option value="Volkswagen" /> 
        </datalist
    </form
</body
  
</html


Output:

Example 2:




<!doctype html>  
<html>  
<head>  
<title>
How to specify a list of pre-defined options for input controls?
</title>  
</head>  
<body>
     <h2>
         GeeksForGeeks
     </h2>
    <h2>
How to specify a list of pre-defined options for input controls?
  
    </h2>  
<input list="Languages" />   
<datalist id="Languages">  
<option value="PHP">  
<option value="ASP">  
<option value="Python">  
<option value="Ruby">  
<option value="Java">  
</datalist>  
</body>  
</html>  


Output:



Last Updated : 28 May, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads