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

elementy 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

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

CSS display

block

Dodatkowe domyślne reguły CSS elementu optgroup

optgroup {
  display:block;
}

Interpretacja elementu optgroup

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

Edge

tak

Opis atrybutów elementu optgroup

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem optgroup określa czy dany element optgroup oraz zawartość reprezentowana przez wspomniany element optgroup powinna zostać wyłączona 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 wspomnianego elementu "optgroup" zostały wyłączone z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "optgroup" został dodany atrybut "disabled".

label

Przeznaczenie atrybutu label

Atrybut label wykorzystany wraz z elementem optgroup określa etykietę w postaci nagłówka dla grupy opcji wyboru reprezentowanej przez dany element optgroup.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu label

nagłówek

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

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

Pierwsza grupa opcji wyboru reprezentowana przez przykładowy element "optgroup" posiada swoją własną etykietę w postaci nagłówka, którego treścią jest ciąg znaków "owoce", ponieważ do wspomnianego elementu "optgroup" został dodany atrybut "label" wraz z wartością "owoce".