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.

<sup> Physische Auszeichnung

CSS - Checkboxen und Radiobuttons farblich anpassen

PHP - Alle Leerzeichen entfernen

JavaScript - Diese Webseite teilen

MySQL - Datensätze (Gehalt) zwischen 2000 und 3000 anzeigen

Prägnante Linkbeschreibungen
Auch Links sind im Textfluss eine Art von Hervorhebungen. Sinnvollerweise sollten einzelne Wörter oder kurze Sätze als Link fungieren und nicht etwa ganze Textabsätze.