Ostatnio edytowany:

option

Autor: Virtual Patriot

Przeznaczenie elementu option

Element option reprezentuje jedną opcję wyboru należącą do elementu select, elementu datalist lub elementu optgroup.

Dodatkowe techniczne informacje o elemencie option

kategoria ogólna

brak

kontekst zewnętrzny
  • jako element dziecko elementu select

    Przykładowy Kod HTML

    <form>
      <fieldset>
        <legend>Rodzaje muzyki</legend>
    
        <select>
          <option>techno</option>
          <option>rock</option>
          <option>pop</option>
          <option>trance</option>
        </select>
      </fieldset>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem zewnętrznym przykładowych elementów "option" jest element "select", dla którego wspomniane elementy "option" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "select", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "option".

  • jako element dziecko 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>
      </datalist>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem zewnętrznym przykładowych elementów "option" jest element "datalist", dla którego wspomniane elementy "option" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "datalist", jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "option".

  • jako element dziecko elementu optgroup

    Przykładowy Kod HTML

    <form>
      <fieldset>
        <legend>Rodzaje muzyki oraz filmu</legend>
    
        <select>
          <optgroup label="Rodzaj Muzyki">
            <option>techno</option>
            <option>rock</option>
            <option>pop</option>
            <option>trance</option>
          </optgroup>
    
          <optgroup label="Rodzaj Filmu">
            <option>komedia</option>
            <option>dramat</option>
            <option>horror</option>
            <option>dokument</option>
          </optgroup>
        </select>
      </fieldset>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem zewnętrznym przykładowych elementów "option" są elementy "optgroup", dla których wspomniane elementy "option" są elementami dziećmi, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "optgroup" oraz element "optgroup" jest prawidłowym kontekstem zewnętrznym dla poszczególnych elementów "option".

kontekst wewnętrzny
  • jeżeli dany element option posiada atrybut label oraz atrybut value oznacza to brak kontekstu wewnętrznego

    Przykładowy Kod HTML

    <form>
      <fieldset>
        <legend>Rodzaje muzyki</legend>
    
        <select>
          <option label="techno" value="rodzaj-1"></option>
          <option label="rock" value="rodzaj-2"></option>
          <option label="pop" value="rodzaj-3"></option>
          <option label="trance" value="rodzaj-4"></option>
        </select>
      </fieldset>
    
      <button type="submit">zatwierdź</button>
    </form>

    Przykładowe elementy "option" nie posiadają kontekstu wewnętrznego, ponieważ wspomniane elementy "option" posiadają atrybut "label" oraz atrybut "value", dlatego w tej sytuacji wspomniany brak kontekstu wewnętrznego jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "option".

  • jeżeli dany element option posiada atrybut label, lecz nie posiada atrybutu value jego kontekstem wewnętrznym może być zawartość tekstowa

    Przykładowy Kod HTML

    <form>
      <fieldset>
        <legend>Rodzaje muzyki</legend>
    
        <select>
          <option label="techno">rodzaj-1</option>
          <option label="rock">rodzaj-2</option>
          <option label="pop">rodzaj-3</option>
          <option label="trance">rodzaj-4</option>
        </select>
      </fieldset>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem wewnętrznym przykładowych elementów "option", które posiadają atrybut "label" jest wyłącznie zawartość tekstowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "rodzaj-1", ciąg znaków "rodzaj-2", ciąg znaków "rodzaj-3" oraz ciąg znaków "rodzaj-4", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "option".

  • jeżeli dany element option nie posiada atrybutu label jego kontekstem wewnętrznym musi być zawartość tekstowa, lecz nie same białe znaki

    Przykładowy Kod HTML

    <form>
      <fieldset>
        <legend>Rodzaje muzyki</legend>
    
        <select>
          <option value="rodzaj-1">techno</option>
          <option value="rodzaj-2">rock</option>
          <option value="rodzaj-3">pop</option>
          <option value="rodzaj-4">trance</option>
        </select>
      </fieldset>
    
      <button type="submit">zatwierdź</button>
    </form>

    Kontekstem wewnętrznym przykładowych elementów "option", które nie posiadają atrybutu "label" jest wyłącznie zawartość tekstowa, lecz nie same białe znaki, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli ciąg znaków "techno", ciąg znaków "rock", ciąg znaków "pop" oraz ciąg znaków "trance", jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "option".

wymagane elementy dzieci

jeżeli dany element option nie posiada atrybutu label, żaden element HTML, a zawartość tekstowa, lecz nie same białe znaki

wymagane atrybuty

brak

składnia HTML

<option> ... </option>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

tag może zostać pominięty, lecz tylko jeżeli bezpośrednio po danym elemencie option występuje inny element option lub element optgroup lub jeżeli bezpośrednio po danym elemencie option nie występuje żadna inna zawartość, która z założenia miałaby należeć do zawartości elementu rodzica danego elementu option

CSS display

block

Dodatkowe domyślne reguły CSS elementu option

option {
  display:block;
}

Interpretacja elementu option

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu option

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem option określa czy dany element option powinien zostać wyłączony z interakcji z użytkownikiem.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu disabled

disabled

Atrybut disabled jest atrybutem logicznym elementu option.

Przykładowy Kod HTML

<!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>
        Wybierz jeden owoc:

        <select name="owoc">
          <option>ananas</option>
          <option>banan</option>
          <option>kokos</option>
          <option disabled>malina</option>
          <option>truskawka</option>
          <option>wiśnia</option>
        </select>
      </label>

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

  </body>
</html>

Rezultat

Przykładowy element "option", którego zawartością jest ciąg znaków "malina" został wyłączony z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "option" został dodany atrybut "disabled".

label

Przeznaczenie atrybutu label

Atrybut label wykorzystany wraz z elementem option określa etykietę dla opcji wyboru reprezentowanej przez dany element option.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu label

etykieta

Należy podać niepusty ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas etykiety.

Przykładowy Kod HTML

<!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>
        Wybierz jeden owoc:

        <select name="owoc">
          <option label="niewybrany"></option>
          <option>ananas</option>
          <option>banan</option>
          <option>kokos</option>
          <option>malina</option>
          <option>truskawka</option>
          <option>wiśnia</option>
        </select>
      </label>

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

  </body>
</html>

Rezultat

Pierwsza opcja wyboru reprezentowana przez przykładowy element "option" posiada swoją własną etykietę, której treścią jest ciąg znaków "niewybrany", ponieważ do wspomnianego elementu "option" został dodany atrybut "label" wraz z wartością "niewybrany".

selected

Przeznaczenie atrybutu selected

Atrybut selected wykorzystany wraz z elementem option określa czy opcja wyboru reprezentowana przez dany element option powinna być domyślnie wybraną opcją.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu selected

selected

Atrybut selected jest atrybutem logicznym elementu option.

Przykładowy Kod HTML

<!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>
        Wybierz jeden owoc:

        <select name="owoc">
          <option>ananas</option>
          <option>banan</option>
          <option>kokos</option>
          <option>malina</option>
          <option selected>truskawka</option>
          <option>wiśnia</option>
        </select>
      </label>

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

  </body>
</html>

Rezultat

Domyślnie wybraną opcją z pośród opcji wyboru reprezentowanych przez przykładowe elementy "option" elementu "select" jest opcja reprezentowana przez element "option", którego zawartością jest ciąg znaków "truskawka", ponieważ do wspomnianego elementu "option" został dodany atrybut "selected".

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem option określa wartość, jaka powinna zostać przypisana do danego elementu option oraz która to wartość może między innymi zostać wykorzystana podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany jeden z elementów HTML, którego dana może posiadać wartość wspomnianego elementu option.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu value

ciąg znaków

Należy podać ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas wartości.

Przykładowy Kod HTML

<!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>
        Wybierz jeden owoc:

        <select name="owoc">
          <option value="niewybrany">-</option>
          <option>ananas</option>
          <option>banan</option>
          <option>kokos</option>
          <option>malina</option>
          <option>truskawka</option>
          <option>wiśnia</option>
        </select>
      </label>

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

  </body>
</html>

Rezultat

Wartością, jaka została przypisana do przykładowego elementu "option", którego zawartością jest znak "-" jest wartość "niewybrany", dlatego gdy użytkownik wybierze opcję reprezentowaną przez wspomniany element "option" dana reprezentowana przez element przodek typu "select" wspomnianego elementu "option" będzie posiadała wartość "niewybrany", ponieważ do wspomnianego elementu "option" został dodany atrybut "value" wraz z wartością "niewybrany".