Radiobuttons in Formularen <input type="radio" - Auswahl-Kästchen, Optionsfeld

In vielen Formularen auf Webseiten sieht man die typischen Auswahl-Kästchen (korrekter Begriff ist Radiobutton) z.B. für die Erfassung der Anrede „Herr“ oder „Frau“.

Das typische Erscheinungsbild von Radiobuttons ist rund. Damit weiß der Benutzer intuitiv, dass es eine „oder“-Auswahl ist. Daher ist der Begriff „Radio-Button“ auch gut gewählt. Beim Radio kann man auch nur einen Sender hören und drückt man eine andere Sendertaste, dann kommt der nächste Sender und der ursprünglich ist nicht mehr gewählt. Genau das passiert auch bei Radiobuttons. Möchte man allerdings eine Mehrfachauswahl, dann benötigt man Checkboxen (was ein anderes HTML-Elemententyp darstellt).

Aufbau des HTML-Befehls für Radiobuttons

Bei dem Formularelement Radiobutton benötigen wird den HTML-Befehl <input - der Unterschied kommt durch die Angabe des Typs zustande. Hier wird „radio“ angegeben:

<input type="radio"  >

Als nächstes wollen wir den Namen für das Feld angeben, den wir dann später z.B. über PHP darauf zugreifen können. Wichtig ist der Feldname auch, damit für den Browser klar ist, welche Radio-Buttons zusammengehören:

<input type="radio" name="anrede"  >

Als letztes wollen wir den übermittelten Wert angeben, den wir dann später z.B. über PHP auswerten können:

<input type="radio" name="anrede" value="w">

Bisher würde das zu folgender Ausgabe im Browser führen (was nicht zielführend ist):

Der Nutzer sollte schon wissen, was er so anklickt. Daher sollte vor oder nach dem HTML-Befehl noch als Text, welche „Bedeutung“ hinter dem Radiobutton sich verbirgt:

<input type="radio" name="anrede" value="w"> Frau

Richtig sinnig wird es allerdings erst, wenn man auch eine Auswahl hat. Daher benötigen wir mindestens 2 Radiobuttons:

<input type="radio" name="anrede" value="w"> Frau
<input type="radio" name="anrede" value="m"> Herr

Und somit haben wir folgendes Aussehen im Browser:

Jetzt könnte man das noch schöner (und klarer) darstellen über Umbrüche. Aber Design von Formularen sehen wir uns später an und kann über CSS wesentlich besser umgesetzt werden. Wichtig ist erst einmal die Funktion!

Tipp am Rande zum Vermeiden von Fehlangaben bei Radiobuttons

Sobald man einem Radiobutton angeklickt hat, muss man eine Option wählen – selbst wenn auf den zweiten Blick (es ist öfters schneller geklickt wie gelesen) eigentlich gar nichts wirklich zutrifft. Als Beispiel könnte z.B. eine Firma etwas über das Formular bestellen – welche Anrede hat wohl eine Firma, wenn nur „Herr“ oder „Frau“ als Radiobutton angeboten wird?

Manchmal sind Angaben auch nicht zwingend notwendig und der Nutzer möchte keine Angaben dazu machen. Dann sollte man auch einen weiteren Radiobutton mit der Option „keine Angaben“ anbieten. Ansonsten kommen schnell Falschangaben zustande, die nicht einmal böswillig sein müssen.

Also einfach „keine Angabe“ anbieten:

Menge der Formularfelder

Formulargestaltung lebt davon, dass man so wenig wie möglich abfragt. Mit jeder weiteren Abfrage verliert der Nutzer die Motivation, das Formular überhaupt auszufüllen.