Auswahllisten sind in HTML5 ein nützliches Werkzeug, um Benutzern die Möglichkeit zu geben, eine von mehreren Optionen auszuwählen. Sie sind besonders praktisch, wenn es mehrere Möglichkeiten gibt, aus denen ausgewählt werden soll. Eine Auswahlliste wird mit dem <select>-Tag erstellt, und jede Option darin wird mit einem <option>-Tag definiert.

Grundlage: Die Struktur einer Auswahlliste

Um eine einfache Auswahlliste zu erstellen, benötigst du folgende Grundstruktur:

• Das <select>-Element: Damit wird die eigentliche Auswahlliste erstellt.
• Die <option>-Tags: Diese enthalten die wählbaren Optionen in der Liste.

Basisstruktur eines Dropdown-Menüs

Hier ein einfaches Beispiel:

<form action="https://form-method.dev" method="post">
  <label for="fruits">Wähle deine Lieblingsfrucht:</label>
  <select name="fruits" id="fruits">
    <option value="apfel">Apfel</option>
    <option value="banane">Banane</option>
    <option value="kirsche">Kirsche</option>
  </select>
  <button type="submit">Absenden</button>
</form>

Erklärung:

1. Das <select>-Element:
   • Enthält die Auswahlliste.
   • Das name-Attribut (fruits) wird mit den ausgewählten Daten gesendet.
2. Die <option>-Elemente:
   • Jede Option repräsentiert einen auswählbaren Wert.
   • Das value-Attribut gibt an, welcher Wert gesendet wird, wenn eine Option ausgewählt wird. Zum Beispiel:
     • Wird „Apfel“ ausgewählt, übermittelt das Formular "apfel".
   • Der Text zwischen <option> und </option> beschreibt, was der Benutzer sieht.
3. Die Absenden-Schaltfläche:
   • Der <button> wird benutzt, um das Formular abzusenden.

Was passiert beim Absenden? Wenn der Benutzer „Banane“ auswählt und auf „Absenden“ klickt, überträgt das Formular den Wert banane an den Server.

Wie Optionen vorselektiert werden

Manchmal möchtest du, dass beim Laden der Seite eine Option bereits vorausgewählt ist. Dafür kannst du das Attribut selected im <option>-Tag verwenden. Die Option mit dem Attribut selected wird dann standardmäßig angezeigt.

Beispiel mit vorselektierter Option

<form action="https://form-method.dev" method="post">
  <label for="fruits">Wähle deine Lieblingsfrucht:</label>
  <select name="fruits" id="fruits">
    <option value="apfel" selected>Apfel</option>
    <option value="banane">Banane</option>
    <option value="kirsche">Kirsche</option>
  </select>
  <button type="submit">Absenden</button>
</form>

Was passiert hier?

• selected: Die erste Option (Apfel) ist standardmäßig ausgewählt.
• Der Benutzer kann weiterhin eine andere Option aus der Liste auswählen.

Das value-Attribut: Warum es wichtig ist

Das value-Attribut in einem <option>-Tag ist entscheidend, weil es den tatsächlichen Wert definiert, der an den Server gesendet wird. Ohne das value-Attribut verwendet der Browser den sichtbaren Text (also das, was der Benutzer sieht) als Wert.

Beispiel ohne value

<form action="/submit" method="post">
  <label for="colors">Wähle eine Farbe:</label>
  <select name="colors" id="colors">
    <option>Rot</option>
    <option>Blau</option>
    <option>Gelb</option>
  </select>
  <button type="submit">Absenden</button>
</form>

• Wählt der Benutzer „Blau“ aus, wird einfach Blau an den Server gesendet.

Beispiel mit value

<form action="/submit" method="post">
  <label for="colors">Wähle eine Farbe:</label>
  <select name="colors" id="colors">
    <option value="red">Rot</option>
    <option value="blue">Blau</option>
    <option value="yellow">Gelb</option>
  </select>
  <button type="submit">Absenden</button>
</form>

• In diesem Fall wird, wenn der Benutzer „Blau“ auswählt, der Wert blue und nicht der sichtbare Text Blau gesendet.

Warum ist das value-Attribut sinnvoll?

1. Es ermöglicht dir, interne Daten zu definieren, die an den Server gesendet werden.
2. Du kannst Werte verwenden, die sich von den sichtbaren Texten unterscheiden.
3. Es erleichtert die Verarbeitung der Daten auf der Serverseite.

Alles zusammen in einem praktischen Beispiel:

Hier ist ein übersichtlicheres Formular mit einer Dropdown-Auswahlliste, einer vordefinierten Option und passenden Werten:

<form action="/send" method="post">
  <label for="countries">Wähle dein Land:</label>
  <select name="countries" id="countries">
    <option value="de" selected>Deutschland</option>
    <option value="us">USA</option>
    <option value="fr">Frankreich</option>
    <option value="jp">Japan</option>
  </select>
  <button type="submit">Absenden</button>
</form>

Was passiert:

• Standardmäßig ist „Deutschland“ ausgewählt.
• Der Wert des ausgewählten Landes (z. B. fr für Frankreich) wird gesendet.

Kurze Zusammenfassung:

• Eine Auswahlliste wird mit <select> und <option> erstellt.
• Das value-Attribut definiert den Wert, der gesendet wird, wenn eine Option ausgewählt ist.
• Mit selected kann eine Option standardmäßig vorausgewählt werden.

Auswahllisten sind ein fester Bestandteil moderner Webformulare. Sie sind einfach zu erstellen, gut nutzbar und bieten eine klare Möglichkeit für Benutzer, aus vorgegebenen Optionen auszuwählen. Indem du sie in einem Formular einsetzt, kannst du Benutzereingaben effizient und klar lenken.