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.

CSS - Nur gefüllte Tabellenzellen hervorheben

PHP - Jedes 2. Zeichen ersetzen

JavaScript - Schieberegler für Bilder

MySQL - Anzahl der Datensätze einer Spalte