Hauptmenü

Untermenü

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