Radiobuttons und Checkboxen

Wenn der Nutzer eine von wenigen Optionen auswählen soll, verwenden wir Radiobuttons: Eingabefelder mit type="radio". Radiobuttons funktionieren als Gruppe: Von allen Radiobuttons mit demselben name kann nur einer ausgewählt sein. Wählt der Nutzer einen anderen, verschwindet die vorherige Auswahl. Jeder Radiobutton hat ein Attribut value, das gesendet wird, wenn dieser Button ausgewählt ist, zum Beispiel groesse=gross.

Eine Checkbox, ein Eingabefeld mit type="checkbox", funktioniert für sich allein: Der Nutzer kann jede Checkbox unabhängig von den anderen an- oder abhaken. Sie wird für Ja-Nein-Fragen verwendet, etwa um den Bedingungen zuzustimmen. Eine angehakte Checkbox wird zum Beispiel als kaese=on gesendet; eine nicht angehakte wird gar nicht gesendet.

Auch Radiobuttons und Checkboxen brauchen Beschriftungen. Meistens schreiben wir die Beschriftung hinter das Eingabefeld, damit der Text rechts vom Button steht. Ein Klick auf die Beschriftung wählt den Button ebenfalls aus, und der kleine Button lässt sich so leichter treffen.

So könnte ein Teil einer Pizzabestellung aussehen:

<div>
	<input type="radio" name="groesse" value="klein" id="groesse-klein">
	<label for="groesse-klein">Klein</label>
	<input type="radio" name="groesse" value="gross" id="groesse-gross">
	<label for="groesse-gross">Groß</label>
</div>
<div>
	<input type="checkbox" name="kaese" id="eingabe-kaese">
	<label for="eingabe-kaese">Extra Käse</label>
</div>

Dieser Code wird so angezeigt (probiere, darauf zu klicken):