RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-datalist-tag/ below:

HTML datalist Tag - GeeksforGeeks

HTML datalist Tag

Last Updated : 24 Feb, 2025

The <datalist> tag in HTML provides a way to display a list of predefined options for <input> elements.

This allows users to either type their own value or select from the list of suggestions, making data entry more efficient.

HTML


 <!DOCTYPE html>
<html>

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

Syntax

<input list="datalist-id"><datalist id="datalist-id">

    <option value="Option 1">
    <option value="Option 2">
    <option value="Option 3">
    ...
</datalist>

Features of <datalist> Tag

Autocomplete: When a user starts typing in the associated <input> field, the browser suggests matching options from the <datalist>.
User Input: Users can either select from the list of options or enter a custom value that is not in the list.
Cross-browser Support: Most modern browsers support the <datalist> element, but it's always good to check for compatibility if you're targeting older browsers.

More Example HTML


 <!DOCTYPE html>
<html>

<body>
  <form action="">
    <label>Your Cars Name: </label>
    <input list="cars" id="carsInput" />
    <datalist id="cars">
      <option value="BMW" />
      <option value="Bentley" />
      <option value="Mercedes" />
      <option value="Audi" />
      <option value="Volkswagen" />
    </datalist>

    <button onclick="datalistcall()" type="button">
      Click Here
    </button>
  </form>
  <p id="output"></p>

  <script type="text/javascript">
    function datalistcall() {
      var o1 = document.getElementById("carsInput").value;
      document.getElementById("output").innerHTML =
        "You select " + o1 + " option";
    }
  </script>
</body>

</html>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4