HTML - Elemente - Formulare - Auswahlfelder
1. Einführung
Auswahlfelder werden auch oft als Select-Felder oder Popup-Selects oder Popup-Felder bezeichnet. Der Grund für diesen "Popup"-Kram kommt daher, dass die Felder beim anklicken ausklappen und alle Inhalte anzeigen. Ein Beispiel sieht so aus:
Programmiersprachen
Dabei gibt es die Möglichkeit, nur eine oder auch mehrere Optionen auszuwählen.
2. Aufbau
Ein Auswahlfeld besteht aus einem äußeren <select>
- und mehreren inneren <option>
-Elementen.
<select name="sprachen">
<option value="abap">ABAP</option>
<option value="basic">BASIC</option>
<option value="cpp">C++</option>
<option value="delphi">Delphi</option>
<option value="java">Java</option>
</select>
name
, value
Im Gegensatz zu den sonst üblichen Formularelementen wird das name
-Attribut nicht direkt in das Auswahlfeld
(<option>
) gesetzt, sondern in das Hauptelement <select>
. Das eigentliche
value
-Attribut dagegen gehört in die einzelnen <option>
-Felder.
selected
Damit kann man ein <option>
-Element vorselektieren, änlich wie checked
bei Radio-Buttons oder
Checkboxen.
<!-- HTML 4 -->
<option value="blubb" selected>Blubb</option>
<!-- XHTML 1 -->
<option value="blubb" selected="selected">Blubb</option>
3. Strukturierung
Man kann in einem <select>
-Feld auch "Gruppen" anlegen. Diese bekommen eine Art Überschrift, die nicht ausgewählt
werden kann und erst beim Aufklappen sichtbar wird. Ein Beispiel könnte so aussehen:
Programmiersprachen
Der Code
<select name="sprachen">
<optgroup label="Alter Müll">
<option value="basic">BASIC</option>
<option value="fortran">Fortran</option>
<option value="cobol">Cobol</option>
<option value="c">C</option>
</optgroup>
<optgroup label="Ganz OK">
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="cpp">C++</option>
</optgroup>
<optgroup label="Supi">
<option value="java">Java</option>
<option value="rubys">Ruby</option>
</optgroup>
</select>
Erläuterung
"Gruppen" werden mit <optgroup>
erzeugt. Dabei gibt es allerdings nur eine Verschachtelung in die Tiefe!
Man kann also ein <optgroup>
nicht in ein weiteres packen. label
ist dann die "Überschrift"
der Gruppe.
4. Mehrfachauswahl
Man kann bei Auswahllisten auch mehrere Optionen auswählen. Dazu muss dem Feld nur das Attribut multiple
verabreicht werden. Dann können mit "Strg" und Klick verschiedene Werte ausgewählt werden. Da es bei einem
einzeiligen Feld aber ziemlich unkomfortabel und unübersichtlich ist, gibt es noch das Attribut size
,
mit dem man die Anzahl der Zeilen festlgegen kann:
Welche Sprachen beherrschst du?
<select name="sprachen[]" multiple="multiple" size="4">
<option value="basic">BASIC</option>
<option value="fortran">Fortran</option>
<option value="cobol">Cobol</option>
<option value="c">C</option>
<option value="php">PHP</option>
<option value="javascript">JavaScript</option>
<option value="cpp">C++</option>
<option value="java">Java</option>
<option value="rubys">Ruby</option>
</select>
Erläuterung
Wichtig ist, dass ihr beim name
-Attribut die eckigen Klammern setzt, damit auch alle ausgewählten Optionen
von PHP verarbeitet werden können. Das multiple
-Attribut sorgt für die Mehrfachauswahl (welche DTD habe ich wohl),
und size="4"
vergrößert das select
-Element auf vier Zeilen.
5. Attribut disabled
... kann auch hier eingesetzt werden. Das gilt sowohl für das komplette <select>
-Feld als auch für einzelne
<option>
-Elemente. Allerdings ist das meiner Meinung nach nur in bestimmten Fällen sinnvoll.
Beispiele
Komplettes Select-Feld auf disabled
gesetzt
Feld mit "BASIC"" auf disabled
gesetzt.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt