HTML <select>-Tag
Das HTML <select>-Tag wird verwendet, um eine Dropdown-Liste mit Optionen zu erstellen, die angezeigt wird, wenn der Benutzer auf ein Formular-Element klickt, und ermöglicht es dem Benutzer, eine der Optionen auszuwählen.
Das <option>-Tag wird verwendet, um die verfügbaren Optionen zu definieren. Das Tag wird in das <select>-Tag eingefügt.
Die erste Option aus der Liste wird standardmäßig ausgewählt. Um eine vordefinierte Option zu ändern, wird das Attribut selected verwendet.
Das <optgroup>-Tag wird verwendet, um mehrere Optionen in einer Gruppe zusammenzufassen. Die Beschriftung von <optgroup> wird als fette Überschrift angezeigt.
Das Erscheinungsbild der Liste hängt vom size-Attribut ab, das die Anzahl der sichtbaren Optionen angibt. Die Breite der Liste hängt von der Länge des Textes innerhalb von <option> ab. Die Breite kann auch mit CSS-Stilen reguliert werden.
Das <select>-Tag ist mit CSS schwierig effektiv zu stylen. Sie können bestimmte Teile eines Elements beeinflussen. Beispielsweise ist es möglich, die angezeigte Schriftart, das Box-Modell usw. zu steuern, sowie die appearance-Eigenschaft zum Entfernen des Standard-Systemdesigns zu verwenden. Diese Eigenschaften liefern jedoch kein stabiles Ergebnis über verschiedene Browser hinweg. Die interne Struktur des <select>-Tags ist komplex und schwer zu steuern. Für eine vollständige Kontrolle benötigen Sie möglicherweise eine Bibliothek mit besserem Styling für Formular-Widgets oder ein Dropdown-Menü unter Verwendung von nicht-semantischen Elementen.
TIP
Wenn Sie die Daten an den Server senden oder die Liste mit Skripten referenzieren müssen, sollte das <select>-Tag in das <form>-Tag eingebettet werden.
Syntax
Das <select>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<select>) und dem schließenden (</select>) Tag geschrieben.
Beispiel für das HTML <select>-Tag:
Beispiel für das HTML <select>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</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
Books HTML CSS PHP JavaScript ---
Beispiel für das HTML <select>-Tag mit dem <optgroup>-Tag:
Beispiel für das HTML <select>-Tag mit <optgroup>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<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 wird das <optgroup>-Tag verwendet, um die Optionen in Gruppen zusammenzufassen.
Ergebnis
HTML CSS Git Java ---
Beispiel für das HTML <input>-Tag mit dem <datalist>-Tag:
Beispiel für das HTML <input>-Tag mit <datalist>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<p>Airport of departure:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option value="Berlin">
<option value="Los Angeles">
<option value="Moscow">
<option value="Paris">
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>In diesem Beispiel wird das <form>-Tag verwendet, da Informationen an den Server gesendet werden müssen.
Ergebnis
Abflughafen:
---
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| autofocus | autofocus | Legt fest, dass die Liste nach dem Laden der Seite den Fokus erhalten soll. |
| disabled | disabled | Zeigt an, dass die Liste deaktiviert ist und der Benutzer nicht damit interagieren kann. |
| form | form_id | Wird in allen modernen Browsern unterstützt. |
| multiple | multiple | Zeigt an, dass mehr als eine Option ausgewählt werden kann. Die Methode zur Auswahl mehrerer Optionen hängt vom Betriebssystem ab. Unter Windows muss die STRG-Taste gedrückt gehalten werden, unter Mac die CMD-Taste. |
| name | name | Definiert einen Namen für das Dropdown-Menü. Er kann verwendet werden, um nach dem Senden auf die Formulardaten zuzugreifen oder um auf ein JavaScript-Element zu verweisen. |
| required | required | Zeigt an, dass die Auswahl einer Option erforderlich ist. |
| size | number | Gibt die Anzahl der sichtbaren Optionen in der Dropdown-Liste an. Wenn der Wert des „size“-Attributs größer als 1 und kleiner als die Gesamtzahl der Optionen in der Liste ist, fügt der Browser automatisch einen Bildlauf hinzu, um anzuzeigen, dass weitere Optionen vorhanden sind. |
Das <select>-Tag unterstützt Globale Attribute und Ereignisattribute.
So stylen Sie ein HTML <select>-Tag
Praxis
Welche Funktion hat das HTML-Element 'select'?