Das Tag <select> wird verwendet, um eine Dropdown-Liste mit Optionen zu erstellen, die beim Klicken auf ein Formularelement erscheint und es dem Benutzer ermöglicht, eine der Optionen auszuwählen.

Das Tag <option> wird verwendet, um die möglichen Optionen zur Auswahl zu definieren. Das Tag wird ins Tag <select> eingefügt.

Die erste Option aus der Liste der Optionen ist voreingestellt ausgewählt. Um die vordefinierte Option zu ändern, wird das Attribut selectedverwendet.

Mit dem Tag <optgroup> können Sie mehrere Optionen in einer Gruppe zusammenfassen. Der Inhalt von <optgroup> sieht wie eine fett gedruckte Überschrift aus.

Das Aussehen der Liste hängt vom Attribut size ab, welches die Höhe der Liste definiert. Die Breite der Liste hängt von der Länge des Textes innerhalb des Tages <option> ab. Die Breite kann auch mit CSS-Stilen gesteuert werden.

Wenn Sie die Daten an den Server senden oder auf die Liste mit Skripten verweisen müssen, sollte das Tag <select> ins Tag <form> eingefügt werden.

Syntax

Das Tag <select> wird gepaart verwendet. Sein Inhalt muss zwischen den Start- (<select>) und endtags (</select>) platziert werden.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <form action="action_form.php"  target="_self">
      <select>
        <option value="books">Bücher</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
    </form>
  </body>
</html>

Ergebnis



Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Fenstertitel der Seite</title>
  </head>
  <body>
    <select>
      <optgroup label="Bücher">
        <option value="html">HTML</option>
        <option value="css">CSS</option>
      </optgroup>
      <optgroup label="Snippets">
        <option value="git">Git</option>
        <option value="java">Java</option>
      </optgroup>
    </select>
  </body>
</html>

In diesem Beispiel haben wir mit dem Tag <optgroup> die Optionen in Gruppen zusammengefasst.

Ergebnis



Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Fenstertitel der Seite</title>
  </head>
  <body>
    <p>Abflughafen:</p>
    <form action="action_form.php"  target="_top">
      <input type = "text" list = "airports" name="airports"> 
      <datalist id = "airports">
        <option value = "Berlin">
        <option value = "Los Angeles">
        <option value = "Moskau">
        <option value = "Paris">
      </datalist>
      <input type = "submit" value = "bestätigen">
    </form>
  </body>
</html>

In diesem Beispiel haben wir das Tag <form> verwendet, da wir die Information an den Server senden müssen.

Ergebnis


Abflughafen:


Attribute

Attribut Wert Beschreibung
autofocus autofocus Die Dropdown-Liste wird automatisch fokussiert, während eine Seite hochgeladen wird.
disabled disabled Es deaktiviert die Dropdown-Liste.
form form_id Es definiert die Form, mit der das Element verbunden ist.
Wird in Firefox nicht unterstützt.
multiple multiple Es zeigt an, dass mehr als eine Option ausgewählt werden kann. Die Methode, mehr als eine Option auszuwählen, hängt vom Betriebssystem ab. In Windows müssen Sie die Taste CTRL gedrückt halten, in Mac die Taste CMD.
name name Es bestimmt den Namen fürs Dropdown-Menü. Es kann verwendet werden, um auf die Daten des Formulars nach dem Senden zuzugreifen oder um auf ein JavaScript-Element zu verweisen.
required required Es definiert ein Element, das vor dem Absenden des Formulars ausgewählt werden muss.
size number Es zeigt die Anzahl der Optionen in der Dropdown-Liste an. Wenn der Wert des Attributs size größer als 1 und kleiner als die Gesamtzahl der Optionen in der Liste ist, fügt der Browser automatisch eine Bildlaufleiste hinzu, um anzuzeigen, dass es mehr Optionen zum Anzeigen gibt.

Das Tag <select> unterschtützt Globale Attribute und Globale Eventhandler.

Browser-Support

chrome edge firefox safari opera

Übe dein Wissen

Was ist der Tag <select> in HTML, und was sind seine Attribute?
Finden Sie das nützlich?