LU07a - Auswahllisten

siehe auch selfhtml - Auswahllisten

Sie können dem Anwender mit dem select-Element eine Auswahliste mit festen Einträgen anbieten, aus der er einen Eintrag auswählen kann. Diese Einträge werden innerhalb eines option-Elements notiert. Der Text des ausgewählten Eintrags wird übertragen, wenn der Anwender das Formular abschickt.

<form action="#">
  <label>Anreise:
    <select name="anreise" size="5">
      <option>Auto</option>
      <option>Zug</option>
      <option>Bus</option>
      <option>Fahrrad</option>
      <option>Schiff</option>
    </select>
  </label>
</form>

Es ist möglich, die folgenden Attribute hinzuzufügen:

• name Der interner Bezeichnername des Formular-Elements, damit kann das Zielsystem das Element identifizieren.
• size Die Größe der Liste bestimmt die Anzahl der Zeilen oder Einträge, die gleichzeitig angezeigt werden können. Der Benutzer kann in der Liste scrollen, wenn mehr Einträge existieren als angezeigt werden. Es ist möglich, eine Dropdown-Liste zu erstellen, indem Sie size=„1“ angeben oder das Attribut ganz weglassen.

Wenn Sie es nicht explizit spezifizieren, kann der Benutzer aus einer Liste genau einen Eintrag auswählen. Das multiple-Attribut ermöglicht eine Mehrfachauswahl. Durch die Mehrfachauswahl soll das select Element auf der Server auch als Array erkannt werden, dazu muss der name des Elementes mit eckigen Klammern abgeschlossen werden [].

<form action="#">
  <label>Anreise:
    <select name="anreise[]" size="5" multiple>
      <option>Auto</option>
      <option>Zug</option>
      <option>Bus</option>
      <option>Fahrrad</option>
      <option>Schiff</option>
    </select>
  </label>
</form>

Standardmässig ist kein Eintrag in einer Auswahlliste vorselektiert. Sie können einen Eintrag mit dem select Attribut vorauswählen. Ein Markierungsbalken ist dann für ausgewählte Einträge sichtbar.

<form action="#">
  <label>Anreise:
    <select name="anreise" size="5">
      <option selected>Auto</option>
      <option>Zug</option>
      <option>Bus</option>
      <option>Fahrrad</option>
      <option>Schiff</option>
    </select>
  </label>
</form>

Die Verwendung von <optgroup>-Tags in HTML ermöglicht es, Auswahllisten (Select-Menüs) hierarchisch zu strukturieren und Kategorien zu erstellen. Dies kann sinnvoll sein, um eine klare und intuitive Organisation von Optionen in der Benutzeroberfläche zu ermöglichen.

<form>
  <label>Vorname
    <select name="Namen" size="6">
      <optgroup label="Namen mit A">
        <option label="Anna">Anna</option>
        <option label="Achim">Achim</option>
        <option label="August">August</option>
      </optgroup>
      <optgroup label="Namen mit B">
        <option label="Berta">Berta</option>
        <option label="Barbara">Barbara</option>
        <option label="Bernhard">Bernhard</option>
      </optgroup>
      <optgroup label="Namen mit C">
        <option label="Caesar">Caesar</option>
        <option label="Christiane">Christiane</option>
        <option label="Christian">Christian</option>
      </optgroup>
    </select>
  </label>
</form>

Um eine verschachtelte Menüstruktur zu erstellen, verwenden Sie in HTML das <optgroup>-Element, um Untergruppen von Auswahllisten zu definieren. Innerhalb der <select>-Tags notieren Sie für jede gewünschte Untergruppe ein <optgroup>-Element. Zwischen dem öffnenden <optgroup>-Tag und dem abschließenden </optgroup>-Tag notieren Sie die Einträge für die jeweilige Untergruppe.

Verwenden Sie das Attribut label im öffnenden <optgroup>-Tag, um eine Beschriftung für die Gruppe von Einträgen festzulegen. Diese Beschriftung wird als nicht auswählbare Überschrift angezeigt.

Für die Einträge innerhalb einer Untergruppe verwenden Sie das <option>-Element. Hierbei können Sie das Attribut label verwenden, um den angezeigten Menüeintrag festzulegen.

Inhalte teilweise unter CC-BY-SA-3.0 von SELFHTML kopiert.

Kevin Maurizi, Marcel Suter