Ostatnio edytowany:

datalist

Autor: Virtual Patriot

Przeznaczenie elementu datalist

Element datalist reprezentuje predefiniowaną listę opcji wyboru, która może zostać powiązana z elementem input za pomocą jego atrybutu list.

Dodatkowe techniczne informacje o elemencie datalist

kategoria ogólna
kontekst zewnętrzny
  • element HTML, który tworzy wewnętrzny kontekst frazowany

    Przykładowy Kod HTML

    <form>
      <label>Podaj Twój ulubiony rodzaj muzyki: <input list="lista-sugestii-1"></label>
    
      <datalist id="lista-sugestii-1">
        <option>techno</option>
        <option>rock</option>
        <option>pop</option>
        <option>trance</option>
      </datalist>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem zewnętrznym przykładowego elementu "datalist" jest element "form". Wspomniany element "form" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "form", jest prawidłowym kontekstem zewnętrznym dla elementu "datalist".

kontekst wewnętrzny
  • elementy option

    Przykładowy Kod HTML

    <form>
      <label>Podaj Twój ulubiony rodzaj muzyki: <input list="lista-sugestii-1"></label>
    
      <datalist id="lista-sugestii-1">
        <option>techno</option>
        <option>rock</option>
        <option>pop</option>
        <option>trance</option>
      </datalist>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem wewnętrznym przykładowego elementu "datalist" są wyłącznie elementy "option", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "option", element "option", element "option" oraz element "option", jest prawidłowym kontekstem wewnętrznym dla elementu "datalist".

  • zawartość frazowana wraz z elementami option jako elementami potomkami

    Przykładowy Kod HTML

    <form>
      <label>Podaj Twój ulubiony rodzaj muzyki: <input list="lista-sugestii-1"></label>
    
      <datalist id="lista-sugestii-1">
        <label>
          Lub wybierz z podanej listy:
          <select>
            <option>techno</option>
            <option>rock</option>
            <option>pop</option>
            <option>trance</option>
          </select>
        </label>
      </datalist>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem wewnętrznym przykładowego elementu "datalist" jest wyłącznie element HTML, który należy do kategorii zawartość frazowana oraz którego elementami potomkami są między innymi elementy "option", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "label" wraz z elementami potomkami typu "option", jest prawidłowym kontekstem wewnętrznym dla elementu "datalist".

Element datalist posiada zdolność fallback. Zdolność fallback elementu datalist uaktywnia się w momencie gdy przeglądarka internetowa nie interpretuje elementu datalist.

wymagane elementy dzieci
  • brak
wymagane atrybuty
  • brak
składnia HTML
  • <datalist> ... </datalist>
pominięcie tagu na początku
  • nigdy
pominięcie tagu na końcu
  • nigdy
CSS display
  • inline (jeżeli przeglądarka internetowa nie interpretuje danego elementu datalist)
  • none (jeżeli przeglądarka internetowa interpretuje dany element datalist)

Dodatkowe domyślne reguły CSS elementu datalist

/* jeżeli przeglądarka internetowa interpretuje element "datalist" */
datalist {
  display:none;
}

Interpretacja elementu datalist

Firefox

tak

Google Chrome

tak

Safari

nie

Opera

tak

Internet Explorer

tak, lecz od wersji 10

Edge

tak

Zobacz więcej informacji o interpretacji elementu .