Skip to content
Related Articles

Related Articles

How to specify a list of pre-defined options for input controls in HTML5?
  • Last Updated : 28 May, 2020

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


Output:

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>  

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :