Mehrfachauswahl und Listen

5.1 Element <select>

Die Elemente <select>, <option> und <optgroup> werden verwendet, um Dropdown-Menüs und Mehrfachauswahllisten in HTML-Formularen zu erstellen. Dank dieser Elemente können Benutzer eine oder mehrere Optionen aus einem vordefinierten Satz von Werten auswählen.

Das <select>-Element wird verwendet, um ein Dropdown-Menü zu erstellen. Es enthält ein oder mehrere <option>-Elemente, die die möglichen Auswahloptionen darstellen.

Beispiel:

    
      <label for="country">Wähle ein Land aus:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </select>
    
  

Wichtige Attribute von <select>

Attribut name: legt den Namen des Formularelements fest, der zusammen mit dem ausgewählten Wert an den Server gesendet wird.

    
      <select name="country"></select>
    
  

Attribut id: legt die eindeutige Kennung des Elements fest, die zum Verknüpfen mit einem <label> verwendet wird.

    
      <select id="country" name="country"></select>
    
  

Attribut multiple: ermöglicht dem Benutzer, mehrere Optionen gleichzeitig auszuwählen. Äußerlich wird die Liste als mehrzeilig angezeigt.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

Attribut size: legt die Anzahl der sichtbaren Zeilen in der Dropdown-Liste fest. Dies ist nützlich zum Erstellen von Listen mit Scrollfunktion.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 Element <option>

Das <option>-Element wird innerhalb von <select> verwendet, um jede Option zu definieren, die der Benutzer auswählen kann.

Beispiel:

    
      <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    
  

Wichtige Attribute von <option>:

Attribut value: legt den Wert fest, der an den Server gesendet wird, wenn diese Option ausgewählt ist.

    
      <option value="red">Red</option>
    
  

Attribut selected: gibt an, ob diese Option standardmäßig ausgewählt sein soll.

    
      <option value="green" selected>Green</option>
    
  

Attribut disabled: macht diese Option für die Auswahl unzugänglich.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 Element <optgroup>

Das <optgroup>-Element wird verwendet, um verwandte Optionen innerhalb eines <select> zu gruppieren. Es ermöglicht eine logische Unterteilung der Optionen in Kategorien, was die Dropdown-Liste organisierter und verständlicher macht.

Beispiel:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Wichtige Attribute von <optgroup>:

Attribut label: setzt die Überschrift der Optionsgruppe.

    
      <optgroup label="German Cars"></optgroup>
    
  

Attribut disabled: macht alle Optionen innerhalb dieser Gruppe für die Auswahl unzugänglich.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Nützliche Tipps zur Verwendung von <select>, <option> und <optgroup>

1. Logische Gruppierung: Verwende <optgroup> zur logischen Gruppierung verwandter Optionen: Dies macht das Formular benutzerfreundlicher.
2. Mehrfachauswahl: Wenn du dem Benutzer die Möglichkeit geben möchtest, mehrere Optionen auszuwählen, verwende das Attribut multiple bei <select>.
3. Zugänglichkeit: Verwende die Attribute id und label, um die Zugänglichkeit von Formularelementen zu verbessern. Die richtige Nutzung von label verbessert die Interaktion mit dem Formular für alle Benutzer, einschließlich derjenigen, die unterstützende Technologien verwenden.
4. Styling: Verwende CSS, um das Erscheinungsbild von Dropdown-Menüs und Mehrfachauswahllisten zu verbessern. Zum Beispiel:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }