Articles → HTML 5 → Datalist in HTML5

Datalist in HTML5






Purpose





Syntax


<input list="list_id" name="textbox_name">
    <datalist id="list_id">
        <option value="option 1">
        <option value="option 2">
        <option value="option 3">
..
    </datalist>



Example


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    State
    <input list="list_of_states" name="state">
    <datalist id="list_of_states">
        <option value="Andhra Pradesh">
        <option value="Assam">
        <option value="Bihar">
        <option value="Chandigarh">
        <option value="Chhattisgarh">
        <option value="Delhi">
        <option value="Goa">
        <option value="Gujarat">
        <option value="Haryana">
        <option value="Himachal Pradesh">
        <option value="Jammu and Kashmir">
        <option value="Jharkhand">
        <option value="Karnataka">
        <option value="Kerala">
        <option value="Madhya Pradesh">
        <option value="Maharashtra">
        <option value="Odisha">
        <option value="Punjab">
        <option value="Rajasthan">
        <option value="Tamil Nadu">
        <option value="Telangana">
        <option value="Tripura">
        <option value="Uttar Pradesh">
        <option value="Uttarakhand">
        <option value="West Bengal">
    </datalist>
</body>
</html>



Output



Click to Enlarge


Browser support


Internet ExplorerFirefoxChromeSafariOperaEdge
10.04.020.0Not Supported9.0Yes



Video





Posted By  -  Karan Gupta
 
Posted On  -  Tuesday, March 21, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250