Tutorial

How To Use the HTML5 Datalist Element

Updated on October 12, 2020
    How To Use the HTML5 Datalist Element

    Introduction

    You can give your text inputs a little boost using the <datalist> element. It’s a bit like a blend of <input> and <select>. This article will outline how to use it.

    Prerequisites

    Using the <datalist> Element

    This is how you can use the <datalist> element in your HTML5 markup:

    <label for="favorite-band">Your favorite band?</label>
    <input list="fish"
    name="fish-choice" id="fish-choice>" />
    
    <datalist id="fish">
        <option value="Shark">
        <option value="Tuna">
        <option value="Ulua">
    </datalist>
    

    Conclusion

    The <datalist> element is a useful feature of HTML.

    For a more comprehensive review of the HTML5 markup language, explore our series, How To Build a Website in HTML.

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about our products

    About the author(s)

    Category:
    Tutorial
    Tags:

    Still looking for an answer?

    Ask a questionSearch for more help

    Was this helpful?
     
    Leave a comment
    

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Become a contributor for community

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    DigitalOcean Documentation

    Full documentation for every DigitalOcean product.

    Resources for startups and SMBs

    The Wave has everything you need to know about building a business, from raising funding to marketing your product.

    Get our newsletter

    Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

    New accounts only. By submitting your email you agree to our Privacy Policy

    The developer cloud

    Scale up as you grow — whether you're running one virtual machine or ten thousand.

    Get started for free

    Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

    *This promotional offer applies to new accounts only.