Autor publikacji
Virtual Patriot - Administrator

optgroup

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu optgroup

Element optgroup reprezentuje jedną grupę opcji wyboru składającą się z elementów option, które należą do danego elementu optgroup.

Dodatkowe artykuły związane z elementem optgroup

Informacje techniczne o elemencie optgroup

kategoria ogólna

brak

kontekst zewnętrzny

jako element dziecko elementu select

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 "optgroup" jest element "select", dla którego wspomniane elementy "optgroup" 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 "optgroup".

kontekst wewnętrzny

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

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 wewnętrznym przykładowych elementów "optgroup" są wyłącznie elementy "option", dlatego w tej sytuacji wspomniany kontekst wewnętrzny jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "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>

        <template id="szablon-1">
          <ins>
            <iframe src="dynamiczna-statystyka-01.html"></iframe>
          </ins>
        </template>
        <script src="skrypt-01.js"></script>
      </optgroup>
    </select>
  </fieldset>

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

Kontekstem wewnętrznym przykładowych elementów "optgroup" są wyłącznie elementy "option" lub wyłącznie elementy "option" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny jest prawidłowym kontekstem wewnętrznym dla poszczególnych elementów "optgroup".

wymagane elementy dzieci

brak

wymagane atrybuty

atrybut label

zdolność fallback

nie dotyczy

składnia HTML

<optgroup> ... </optgroup>

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 optgroup występuje inny element optgroup lub gdy bezpośrednio po danym elemencie optgroup 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 optgroup

CSS display

block

Przypuszczalnie domyślne reguły CSS elementu optgroup

optgroup {
  display:block;
  font-weight:700;
  font-style:italic;
  background-color:#EEE;
}

optgroup:disabled {
  color:#888;
}

Interpretacja elementu optgroup

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu optgroup

Atrybut Lokalny

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem optgroup pozwala nam określić czy dany element optgroup oraz treść reprezentowana przez zawartość danego elementu optgroup powinni zostać wyłączeni 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 optgroup.

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 jedną roślinę:

        <select name="roslina">
          <optgroup label="owoce" disabled>
            <option>ananas</option>
            <option>malina</option>
            <option>truskawka</option>
          </optgroup>

          <optgroup label="warzywa">
            <option>kartofel</option>
            <option>marchew</option>
            <option>sałata</option>
          </optgroup>
        </select>
      </label>

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

  </body>
</html>

Rezultat

Przykładowy element "optgroup" posiadający atrybut "label" o wartości "owoce", jak również elementy HTML znajdujące się w zawartości przykładowego elementu "optgroup", zostali wyłączeni z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "optgroup" został dodany atrybut "disabled".

Atrybut Lokalny

label

Przeznaczenie atrybutu label

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

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu label

nazwa etykiety

Należy podać ciąg znaków, który chcemy, aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwa 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 jedną roślinę:

        <select name="roslina">
          <optgroup label="owoce">
            <option>ananas</option>
            <option>malina</option>
            <option>truskawka</option>
          </optgroup>

          <optgroup label="warzywa">
            <option>kartofel</option>
            <option>marchew</option>
            <option>sałata</option>
          </optgroup>
        </select>
      </label>

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

  </body>
</html>

Rezultat

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