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.
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
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Übe dein Wissen
