HTML - Element: <select>

Mit dem <select>-Tag erstellen Sie eine Auswahlliste für Formulare. Einen Listeneintrag fügen Sie mit dem <option>-Tag ein.

<!DOCTYPE html>
<html>
<head>
 <title>Auswahlliste</title>
</head>
<body>

<h1>Auswahlliste</h1>

<form action="">
Ihre Wahl: 
<select name="" size="1">
 <option>Auswahl 1</option>
 <option>Auswahl 2</option>
 <option>Auswahl 3</option>
 <option>Auswahl 4</option>
 <option>Auswahl 5</option>
</select>
</form>

</body>
</html>

Beispiel anzeigen

» Formulare | Auswahllisten

Attribute

name="" - Bezeichnername für den <select>-Tag.
size="" - Anzeigegröße der Liste für den <select>-Tag
multiple="multiple" - Mehrfach-Auswahl für den <select>-Tag
value="" - Absendewert für den <option>-Tag
selected="selected" - Ausgewählte Option für den <option>-Tag.
disabled="disabled" - Ausgeschaltete Auswahlliste oder <option>-Tag.

<!DOCTYPE html>
<html>
<head>
 <title>Auswahlliste mit Mehrfach-Auswahl</title>
</head>
<body>

<h1>Auswahlliste mit Mehrfach-Auswahl</h1>

<p>Die 3 Option wurde vorausgewählt.</p>

<form action="">
Ihre Wahl: <br>
<select name="" size="5" multiple="multiple">
 <option value="1">Auswahl 1</option>
 <option value="2">Auswahl 2</option>
 <option value="3" selected="selected">Auswahl 3</option>
 <option value="4">Auswahl 4</option>
 <option value="5" disabled="disabled">Auswahl 5</option>
</select>
</form>

</body>
</html>

Beispiel anzeigen

Optionen gruppieren

Mit dem <optgroup>-Tag (optgroup = Optionsgruppe) kann man Optionen gruppieren (zusammenfassen). Mit dem label="" Attribut wird eine Gruppenüberschrift hinzugefügt.

<!DOCTYPE html>
<html>
<head>
 <title>Optionen der Auswahlliste gruppieren</title>
</head>
<body>

<h1>Optionen der Auswahlliste gruppieren</h1>

<form action="">
Ihre Wahl: <br>
<select size="12">
 <optgroup label="Gruppe 1">
  <option>Auswahl 1</option>
  <option>Auswahl 2</option>
  <option>Auswahl 3</option>
  <option>Auswahl 4</option>
  <option>Auswahl 5</option>
 </optgroup>
 <optgroup label="Gruppe 2">
  <option>Auswahl 6</option>
  <option>Auswahl 7</option>
  <option>Auswahl 8</option>
  <option>Auswahl 9</option>
  <option>Auswahl 10</option>
 </optgroup>
</select>
</form>

</body>
</html>

Beispiel anzeigen

Bausteine Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<thead> Tabellenkopf

CSS - Pop-up-Bucheffekt

PHP - Verzeichnis als eine Auswahlliste mit Anfangsbuchstaben ausgeben

JavaScript - Zeitabhängige Aktualisierung

MySQL - Datensätze sortieren nach Länge der Zeichen

Fehlerhafter Quelltext
Die meisten Browser sind wahre Lesekünstler. Sie versuchen selbst aus dem größten Code-Chaos ein lesbares Bild für den Betrachter zu schaffen. Je mehr Fehler allerdings im Quelltext vorhanden ist, desto mehr Zeit wird er für die Darstellung benötigen. Eine fehlerfreie Ausgabe ist gleichermaßen zu bezweifeln.