HTML-Tag <optgroup>

❮ Vorige Nächste ❯

Das HTML Tag <optgroup> enthält in einer Gruppe kombinierte Tags <option>. (Das Tag <option> bestimmt die Punkte in einer Pop-up-Liste, die ihrerseits durch das Tag <select> bestimmt wird).

Der Inhalt des Tages <optgroup> sieht wie eine fettgedruckte Überschrift aus. Die im Tag <option> eingeschlossene Elemente werden sich nach rechts verschoben.

Syntax

Das Tag <optgroup> wird gepaart verwendet, das Endtag (</optgroup>) ist nicht obligatorisch.

Das Tag <option> wird in der Regel mit dem Attribut value verwendet und bezeichnet, welcher Wert an den Server für weitere Verarbeitung gesendet wird.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <select>
      <optgroup label="Bücher">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="java">Java</option>
        <option value="linux">Linux</option>
        <option value="git">Git</option>
      </optgroup>
    </select>
  </body>
</html>

Versuch es selber!

Ergebnis

Ein Beispiel mit dem Attribut disabled.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <select>
      <optgroup disabled="disabled" label="Quiz">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="angularjs">AngularJS</option>
      </optgroup>
    </select>
  </body>
</html>

Versuch es selber!

Ergebnis

Attribute

Attribut	Wert	Beschreibung
disabled	disabled	Es zeigt an, dass die Elemente in dieser Gruppe für die Wahl nicht erreichbar sind.
label	text	Es bestimmt die Bezeichnung für die Gruppe, die in der Pop-up-Liste angezeigt wird. Es ist ein obligatorisches Attribut.