4.3.6 Auswahllisten erstellen

Neben Eingabefeldern sind Auswahllisten in Formularen ebenfalls von Bedeutung. So wird z. B. das Land oft über solche Auswahllisten gewählt, sodass sich kein Tippfehler einschleichen kann. Dem Benutzer wird eine Liste mit festgelegten Begriffen dargestellt, aus denen er auswählen kann. Der Text des ausgewählten Begriffes wird dann übertragen.

<form action="datenverarbeitung.php" method="get">
  <p><label for="land">Wählen Sie Ihr Land:</label><br>
    <select name="landauswahl" id="land">
       <option value="dk">Dänemark</option> 
       <option value="de" selected>Deutschland</option>
       <option value="nl">Niederlande</option>
       <option value="fr">Frankreich</option>
       <option value="es">Spanien</option>     
    </select>
  </p>
</form>

Eine Auswahlliste wird eingeleitet durch das Element <select>. Ein unverzichtbares Attribut ist name, das Sie unbedingt angeben müssen. Wenn nun "Deutschland" ausgewählt wird, dann wird der Wert aus dem Attribut name zur HTTP-Variable und der Wert des Attributs value zum HTTP-Wert. Im obigen Beispiel wird damit per HTTP an den Webserver übertragen landauswahl=de. Mehr hierzu später im Kapitel über HTTP.

Attribute und Elemente für Auswahllisten (<select> und <option>)

Attribut/Element	Beschreibung
size	Gibt die Anzahl der sichtbaren Reihen in der Auswahlliste an. size="1" ist der Standardwert und damit erstellen Sie eine sogenannte Drop-Down-Liste. Wird ein höherer Wert angegeben, wird die Liste entsprechend größer dargestellt.
multiple	Ermöglicht dem Benutzer die Auswahl mehrerer Optionen. Wird dem <select>-Element hinzugefügt. Ohne dieses Attribut kann der Benutzer nur eine Option auswählen. Wenn Sie eine Mehrfachauswahl zulassen oder sogar wünschen, sollten Sie dies dem Benutzer deutlich machen.
selected	Legt fest, welche Option standardmäßig ausgewählt ist. Wird dem <option>-Element hinzugefügt. Bei Mehrfachauswahl können mehrere Optionen mit selected vorausgewählt werden.
required	Gibt an, dass der Benutzer eine Auswahl treffen muss (Pflichtfeld). Wird dem <select>-Element hinzugefügt.
name	Unverzichtbares Attribut des <select>-Elements, das beim Absenden des Formulars als Parametername dient. Bei Mehrfachauswahl sollte name als Array angegeben werden, z. B. name="landauswahl[]", um die Verarbeitung mehrerer Werte zu ermöglichen.
id	Identifiziert das <select>-Element eindeutig im Dokument. Wichtig für die Zuordnung von <label>-Elementen und für JavaScript-Interaktionen.
disabled	Deaktiviert eine Option oder das gesamte <select>-Element, sodass es nicht ausgewählt oder genutzt werden kann. Wird häufig verwendet, um nicht verfügbare Optionen anzuzeigen.
<optgroup>	Gruppiert verwandte Optionen innerhalb eines <select>-Elements. Das label-Attribut des <optgroup>-Elements gibt den Namen der Gruppe an. Ermöglicht eine bessere Strukturierung langer Auswahllisten.

Zwei Beispiele mit Erläuterung

Beispiel 1: Einfache Auswahlliste mit Platzhalter und Pflichtfeld

<form action="datenverarbeitung.php" method="get">
  <p><label for="land">Wählen Sie Ihr Land:</label><br>
    <select name="landauswahl" id="land" required>
      <option value="" disabled selected>-- Bitte wählen --</option>
      <option value="dk">Dänemark</option>
      <option value="de">Deutschland</option>
      <option value="nl">Niederlande</option>
      <option value="fr">Frankreich</option>
      <option value="es">Spanien</option>
    </select>
  </p>
</form>

Erläuterung:

• required-Attribut: Das <select>-Element enthält das required-Attribut, wodurch der Benutzer verpflichtet ist, eine Auswahl zu treffen, bevor das Formular abgesendet werden kann.
• Platzhalteroption: Die erste <option> hat value="", disabled und selected gesetzt. Dies dient als Platzhalter mit dem Text "-- Bitte wählen --", der nicht ausgewählt werden kann.
• Barrierefreiheit: Das <label>-Element ist korrekt mit dem for-Attribut und der id des <select>-Elements verknüpft, was die Bedienbarkeit für Screenreader und Tastaturnavigation verbessert.

---

Beispiel 2: Mehrfachauswahl mit Gruppierung und vorausgewählten Optionen

<form action="datenverarbeitung.php" method="get">
  <p><label for="sprachen">Wählen Sie Ihre bevorzugten Programmiersprachen:</label><br>
    <select name="sprachen[]" id="sprachen" multiple size="5">
      <optgroup label="Webentwicklung">
        <option value="html" selected>HTML</option>
        <option value="css">CSS</option>
        <option value="js">JavaScript</option>
      </optgroup>
      <optgroup label="Backend">
        <option value="php">PHP</option>
        <option value="python" selected>Python</option>
        <option value="ruby">Ruby</option>
      </optgroup>
    </select>
  </p>
</form>

Erläuterung:

• multiple-Attribut: Ermöglicht dem Benutzer, mehrere Optionen auszuwählen.
• name="sprachen[]": Durch die eckigen Klammern [] werden die ausgewählten Werte als Array übertragen, was die Verarbeitung auf Serverseite erleichtert.
• size="5": Zeigt fünf Zeilen der Auswahlliste an, sodass mehrere Optionen gleichzeitig sichtbar sind.
• <optgroup>-Elemente: Die Optionen sind in Gruppen wie "Webentwicklung" und "Backend" unterteilt, was die Übersichtlichkeit erhöht.
• Vorausgewählte Optionen: Die Optionen "HTML" und "Python" sind mit dem selected-Attribut vorausgewählt.
• Barrierefreiheit: Das <label> ist korrekt mit dem select-Element verknüpft, was die Zugänglichkeit verbessert.