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.
3. 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 mir schleierhaft, warum man das im ersteren Fall überhaupt einsetzen sollte.
Beispiele
Komplettes Select-Feld auf disabled gesetzt
Feld mit "BASIC"" auf disabled gesetzt. Funktioniert aber nicht im Internet Explorer 6/7.