Hauptmenü

Untermenü

HTML - Elemente - Formulare - Auswahloptionen

1. Radio-Buttons

Radio-Buttons sind Formularelemente, die so aussehen: . Wenn man auf sie drückt, so werden sie "markiert", also aktiviert. Dabei gibt es wie gehabt, je nach DTD zwei Schreibweisen (diesmal setze ich keinen Link, das müsstet ihr mittlerweile selber wissen).


<!-- HTML 4 -->
<input type="radio" name="bla">

<!--XHTML 1 -->
<input type="radio" name="bla" />

radio-Elemente haben bei gleichem name-Attribut die Eigenschaft, dass man nur eines auswählen kann! Klickt mal in folgendem Beispiel auf die runden Felder, um zu sehen, was passiert.

Beispiel

Möglichkeit A Möglichkeit B Möglichkeit C


<input type="radio" name="bla" value="1" />
<input type="radio" name="bla" value="2" />
<input type="radio" name="bla" value="3" />

name, value

Sollen mehrere dieser radio-Typen zu einer organisatorischen Einheit zusammengefasst werden so müssen sie denselben Wert beim name-Attribut haben, ansonsten kann man sie beliebig markieren. Die Unterscheidung erfolgt dann über die verschiedenen Werte des value-Attributs.

checked

Mit diesem Attribut kann man einen Radio-Button vorab markieren. Allerdings pro Gruppe nur einmal! Also bei allen mit demselben Namen.


<!-- HTML 4 -->
<input type="radio" name="bla" value="1" checked>

<!-- XHTML 1 -->
<input type="radio" name="bla" value="1" checked="checked" />

2. Check-Boxen

... bieten die Möglichkeit eine oder mehrere Optionen zu aktivieren. Eine klassische Anwendung für eine Checkbox ist zum Beispiel, den AGBs zuzustimmen. Eine weitere Möglichkeit ist zum Beispiel, zu einer Frage mehrere Antworten geben zu können:

Welche sexuellen Neigungen hast du?
Homosexuell Heterosexuell Linkshänder Rechtshänder


<input type="checkbox" name="neigung_1" value="homosexuell" />
<input type="checkbox" name="neigung_2" value="hetero" />
<input type="checkbox" name="neigung_3" value="links" />
<input type="checkbox" name="neigung_4" value="rechts" />

Wichtig!

Damit alle markierten Felder übertragen werden, müssen die einzelnen Checkboxen unterschiedliche Namen haben. Allerdings gibt es da eine wunderbare Alternative für PHP, indem man den Feldnamen mit einem leeren Index anlegt. Da braucht man nur einen Namen zu wählen. Der steht dann dem zu verarbeiteten Script als Array zur Verfügung. Und das geht so:


<input type="checkbox" name="neigung[]" value="homosexuell" />
<input type="checkbox" name="neigung[]" value="hetero" />
<input type="checkbox" name="neigung[]" value="links" />
<input type="checkbox" name="neigung[]" value="rechts" />

name, value

Ist genau dasselbe wie bei den Radio-Buttons.

checked

Funktioniert auch so wie oben schon beschrieben. Allerdings gibt es bei den Checkboxen einen Unterschied. Es dürfen hier im Gegensatz zu den Radio-Buttons mehrere Felder vorbelegt werden.


<input type="checkbox" name="bla[]" value="1" checked="checked" />
<input type="checkbox" name="bla[]" value="2" checked="checked" />

3. Attribut disabled

Dieses Attribut kann bei beiden Auswahltypen gesetzt werden, dann hat man wie bei den Textfeldern keinerlei Zugriff mehr auf diese Elemente. Ist in meinen Augen eigentlich nur sinnvoll bei gesetzten Werten, über die man informieren will, man aber eine Änderung verhindern möchte.


<input type="radio" name="bla" value="1" disabled="disabled" />
<input type="checkbox" name="blubb" value="1" disabled="disabled" />

Beispiel

Du darfst Mails verschicken Du bist Rechtshänder

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt