Autor publikacji
Virtual Patriot - Administrator

option

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu option

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

Dodatkowe artykuły związane z elementem option

Informacje techniczne 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

  • brak, lecz tylko wtedy gdy dany element option posiada atrybut label oraz atrybut value

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

  • zawartość tekstowa, lecz tylko wtedy gdy dany element option posiada atrybut label oraz nie posiada atrybutu value

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

  • gdy dany element option nie posiada atrybutu label oraz nie jest elementem dzieckiem elementu datalist, wtedy kontekstem wewnętrznym takiego elementu option musi być zawartość tekstowa, lecz nie same białe znaki lub pusty ciąg znaków

    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" oraz które nie są elementami dziećmi elementu "datalist" jest wyłącznie zawartość tekstowa, lecz nie same białe znaki lub pusty ciąg znaków, 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".

  • gdy dany element option nie posiada atrybutu label oraz jest elementem dzieckiem elementu datalist, wtedy kontekstem wewnętrznym takiego elementu option może być zawartość tekstowa

    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ładowych elementów "option", które nie posiadają atrybutu "label" oraz które są elementami dziećmi elementu "datalist" jest wyłącznie zawartość tekstowa, 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

żaden element HTML, a zawartość tekstowa, lecz nie same białe znaki lub pusty ciąg znaków, jednak tylko wtedy gdy dany element option nie posiada atrybutu label oraz nie jest elementem dzieckiem elementu datalist

wymagane atrybuty

brak

zdolność fallback

nie dotyczy

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 wtedy gdy bezpośrednio po danym elemencie option występuje inny element option lub element optgroup lub gdy bezpośrednio po danym elemencie option nie występuje żadna inna zawartość, która z naszego założenia miałaby należeć do kontekstu wewnętrznego elementu rodzica danego elementu option

CSS display

block

Przypuszczalnie domyślne reguły CSS elementu option

option {
  display:block;
  padding-left:2px;
  padding-right:2px;
  padding-bottom:1px;
}

option:disabled {
  color:#888;
}

Interpretacja elementu option

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu option

Atrybut Lokalny

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem option pozwala nam określić 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="https://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".

Atrybut Lokalny

label

Przeznaczenie atrybutu label

Atrybut label wykorzystany wraz z elementem option pozwala nam określić nazwę etykiety, jaką powinna posiadać opcja wyboru reprezentowana przez dany element option.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu label

nazwa etykiety

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

Przykładowy Kod HTML

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

    <form action="https://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

Nazwą etykiety, jaką posiada pierwsza opcja wyboru reprezentowana przez przykładowy element "option", jest nazwa "niewybrany", ponieważ do wspomnianego elementu "option" został dodany atrybut "label" wraz z wartością "niewybrany".

Atrybut Lokalny

selected

Przeznaczenie atrybutu selected

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

Atrybut "selected" ma sens tylko wtedy gdy elementem rodzicem danego elementu "option" nie jest element datalist.

Gdy żaden z elementów "option" należących do elementu select nie posiada atrybutu "selected", wtedy domyślnie wybraną opcją jest opcja wyboru reprezentowana przez pierwszy w kolejności element "option", który nie posiada atrybutu disabled, lecz tylko wtedy gdy element select nie posiada atrybutu multiple oraz gdy wartością atrybutu size elementu select jest wartość "1".

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="https://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ą spośród opcji wyboru reprezentowanych przez przykładowe elementy "option" jest opcja wyboru reprezentowana przez element "option", którego zawartością jest ciąg znaków "truskawka", ponieważ do wspomnianego elementu "option" został dodany atrybut "selected".

Atrybut Lokalny

value

Przeznaczenie atrybutu value

Atrybut value wykorzystany wraz z elementem option pozwala nam określić wartość, jaka powinna zostać przypisana do danego elementu option oraz jaką może posiadać dana reprezentowana przez element select (do którego należy dany element option) lub jaką może posiadać dana reprezentowana przez element input (z którym został powiązany element datalist, do którego należy dany element option).

Docelowa wartość między innymi może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element select lub wspomniany element input.

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="https://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 ciąg znaków "-", jest wartość "niewybrany", dlatego w momencie gdy użytkownik zdecyduje się na wybranie opcji wyboru reprezentowanej przez przykładowy element "option", dana o nazwie "owoc", która jest reprezentowana przez element "select", do którego należy przykładowy element "option", będzie posiadała wartość "niewybrany", ponieważ do wspomnianego elementu "option" został dodany atrybut "value" wraz z wartością "niewybrany".