datalist

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

• Progres XII - Formularz HTML - element "datalist"

kategoria ogólna

• zawartość opływająca

• zawartość frazowana

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

• zero lub więcej elementów option, jak również ewentualnie zawartość skryptowa

  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".

  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>
  
      <template id="szablon-1">
        <ins>
          <iframe src="dynamiczna-statystyka-01.html"></iframe>
        </ins>
      </template>
      <script src="skrypt-01.js"></script>
    </datalist>
  
    <button type="submit">zatwierdź</button>
  </form>

  Kontekstem wewnętrznym przykładowego elementu "datalist" są wyłącznie elementy "option" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "option", element "option", element "option", element "option", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "datalist".

• zawartość frazowana

  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, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "label", jest prawidłowym kontekstem wewnętrznym dla elementu "datalist".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

zdolność fallback

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

składnia HTML

<datalist> ... </datalist>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

• none (jeżeli przeglądarka internetowa interpretuje element datalist)

• inline (jeżeli przeglądarka internetowa nie interpretuje elementu datalist)

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

tak

Nie interpretuje elementu "datalist", który został powiązany z elementem input posiadającym atrybut type o wartości date, time, number, range lub color.

tak

tak

tak

tak, lecz od wersji 10

tak

Zobacz więcej informacji o interpretacji elementu datalist.