Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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“.

Anrede:    Frau      Herr

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:

Frau Herr

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:

Anrede:
Frau
Herr
keine Angaben

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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe