Ostatnio edytowany:

list

Autor: Virtual Patriot

Przeznaczenie atrybutu list

Za pomocą atrybutu list możemy określić, z którą predefiniowaną listą opcji wyboru powinien zostać powiązany interesujący nas element HTML.

Elementy HTML dla atrybutu list

  1. input

Przykład atrybutu list

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj rodzaj muzyki:
        <input type="text" name="rodzaj-muzyki" list="lista-1">
      </label>

      <datalist id="lista-1">
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
        <option>classical</option>
      </datalist>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "input" został dodany atrybut "list" wraz z wartością "lista-1" wspomniany element "input" został powiązany z predefiniowaną listą opcji wyboru reprezentowaną przez element "datalist" posiadający atrybut "id" o wartości "lista-1", dzięki czemu podczas wprowadzania przez użytkownika wartości do wspomnianego elementu "input", użytkownik może skorzystać ze wspomnianej predefiniowanej listy opcji wyboru.

Interpretacja atrybutu list

Firefox

tak

Google Chrome

tak

Safari

nie

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak