Optionsfelder (Radiobuttons) in HTML-Formularen

Wenn auf Webseiten Formulare in HTML erstellt werden, dann möchte man den Benutzern häufig die Auswahl aus einer Gruppe von vordefinierten Antworten ermöglichen, wobei man nur eine Auswahlmöglichkeit hat. Ein typischer Anwendungsfall ist z.B. die Frage nach dem Geschlecht, bei der die Benutzer nicht mehrere Auswahlmöglichkeiten haben sollen. Solche Exklusiv-Antworten können zwar auch mit Dropdown-Listen erstellt werden. Diese sind jedoch eher bei sehr vielen Antwortmöglichkeiten geeignet. Bei einer Frage mit wenigen Einträgen kann es übersichtlicher sein, die möglichen Antworten als Optionsfelder zu gestalten, die auch Radiobuttons genannt werden, weil die Auswahlfelder rund sind. Hierbei entfällt gegenüber der Dropdown-Liste ein Mausklick und ein Eintrag kann direkt ausgewählt bzw. angeklickt werden.

Radiobuttons in HTML-Formularen

Ein weiteres Merkmal von Radiobuttons ist, dass innerhalb einer Gruppe mindestens ein Wert ausgewählt sein muss. Bei Checkboxen hat man z.B. die Möglichkeit, innerhalb einer Gruppe keine Auswahl zu treffen. Bei Radio-Buttons ist das nicht möglich. Hat man einen Radio-Button ausgewählt bzw. ist dieser bereits vorbelegt, kann das nur geändert werden, indem man einen anderen Radiobutton auswählt. Somit ist immer ein Radiobutton ausgewählt.

HTML-Code für Radiobuttons

Wie fast alle Formularfelder werden Radiobuttons mit dem INPUT-Tag erzeugt, der z.B. auch bei einzeiligen Eingabefeldern verwendet wird. Die Unterscheidung erfolgt dabei über das Attribut. Bei Radiobuttons muss das Typ-Attribut auf type="radio" gesetzt werden. Es wird zwischen der normalen HTML- und XHTML-Schreibweise unterschieden. Ein Beispielcode.

<!-- In HTML -->
<input type="radio">

<!-- In XHTML -->
<input type="radio" />

Attribute bei Radiobuttons

Radiobuttons können viele weitere Attribute enthalten. Diese werden nacheinander mit einem Leerzeichen getrennt (in Kleinbuchstaben) dem INPUT-Tag zugefügt.

  • name: Ein wichtiges Attribut bei Radiobuttons ist name. Darüber weist man einem Radiobutton einen Namen zu und mehrere Radiobuttons werden über den gemeinsamen Namen zu einer Gruppe zusammengefasst. Die exklusive Auswahl ist nur innerhalb einer Gruppe möglich. Außerdem erfolgt das Auslesen durch z.B. ein PHP-Script, an das die Formulardaten übertragen werden, über den Namen. Das Attribut für den Namen wird in der Form name="..." angegeben.
  • value: Wenn man mehreren Radiobuttons einer Gruppe denselben Namen zuweist, dann muss es eine Unterscheidungsmöglichkeit zwischen den einzelnen Radiobuttons geben. Das geschieht über das Attribut value und wird in der Form value="..." angegeben.

Dazu ein Beispiel. Auf einer Schulhomepage sollen die Schüler zwischen den Fächern "Kunst" und "Natur" abstimmen. Dabei soll nur eine Auswahl (exklusiv) möglich sein. Für beide Radiobuttons muss man einen gemeinsamen Gruppennamen finden, damit sie gruppiert werden können. In diesem Beispiel wird der gemeinsame Name "Schulfach". Der Code für die beiden Radiobuttons wäre mit den Attributen (name, value) wie folgt einzugeben.

<!-- In HTML -->
<input type="radio" name="schulfach" value="kunst">
<input type="radio" name="schulfach" value="natur">

<!-- In XHTML -->
<input type="radio" name="schulfach" value="kunst" />
<input type="radio" name="schulfach" value="natur" />

Gründe für die Kleinschreibung der Werte

Die Attributwerte (Kunst, Natur und Schulfach) wurden in diesem Beispiel in Kleinbuchstaben geschrieben. Man hätte sie zwar auch in Großbuchstaben schreiben können. Zu einem "guten HTML-Stil" gehört es jedoch, "soweit es geht" die Attributwerte in Kleinbuchstaben anzugeben. Das ist z.B. dann der Fall, wenn die Werte nicht im Browser angezeigt werden und das ist in diesem Beispiel in allen drei Fällen der Fall. Beim Titel-Attribut sind die Werte z.B. als Tooltip im Browser sichtbar und in solchen Fällen sollte man auf die korrekte Groß- und Kleinschreibung achten.

Der Grund, warum man die Attributwerte möglichst in Kleinbuchstaben schreiben sollte ist: Im HTML-Code ist es weitestgehend irrelevant, ob man die Werte in Groß- oder Kleinbuchstaben schreibt. Man könnte z.B. value="KUNST", value="Kunst" oder value="kunst" schreiben. Beim XHTML-Code sind die Regeln schon strenger und bis auf einige Ausnahmen wie z.B. dem Titel-Attribut müssen die Attributwerte in Kleinbuchstaben angegeben werden, auch wenn die Browser eine andere Schreibweise häufig tolerieren. Jetzt hat man schon mal den Zustand, dass die Werte in Groß- und Kleinbuchstaben angegeben werden können oder nur in Kleinbuchstaben angegeben werden müssen.

Zusätzlich werden die Daten meistens an ein Script verschickt, das z.B. in PHP programmiert wurde und die Aufgabe hat, die Daten auszulesen, zu prüfen, zu verarbeiten und auszugeben, z.B. in Form einer E-Mail, die verschickt werden würde. Das Auslesen geschieht über den Namen und hierbei wird zwischen Groß- und Kleinschreibung geachtet. Hat man also einem Radiobutton den Namen "Schulfach" zugewiesen, dann muss man im PHP-Script die Groß- und Kleinschreibung beim Auslesen berücksichtigen. Würde man in diesem Beispiel den Wert mit $_POST['schulfach']; auslesen, dann erhielte man als Rückgabewert immer eine NULL. Denn, beim Auslesen sind $_POST['schulfach']; und $_POST['Schulfach']; unterschiedlich.

Als Programmierer muss man bei der Verwendung von Groß- und Kleinschreibung also jedes Mal darauf achten, ob man etwas in Groß- und/oder Kleinbuchstaben geschrieben hat und dadurch vergeudet man auf Dauer viel Zeit. Aus dem Grunde schreibt man bei programmierinternen Werten soweit es geht alles in Kleinbuchstaben und spart sich jedes Mal das Nachprüfen, ob etwas in Groß- und/oder Kleinbuchstaben geschrieben wurde. Sofern sie nicht im Browser sichtbar sind, spielt das auch keine Rolle.

Nachfolgend sind weitere Attribute beschrieben, die für Radiobuttons wichtig sein können.

  • id: Mit dem ID-Attribut wird einem Radiobutton eine eindeutige ID zugewiesen. Eine ID kann z.B. für interne Links als Sprungmarke verwendet werden und darf nicht mehrfach vergeben worden sein. Die Regeln sind wie bei normalen Eingabefeldern und sind unterhalb von Attribut für die ID beschrieben. Ein Beispielcode.
<!-- In HTML -->
<input type="radio" name="schulfach" value="kunst" id="kunst">
<input type="radio" name="schulfach" value="natur" id="natur">

<!-- In XHTML -->
<input type="radio" name="schulfach" value="kunst" id="kunst" />
<input type="radio" name="schulfach" value="natur" id="natur" />
  • checked: Mit dem Attribut checked wird festgelegt, welcher Radiobutton nach dem Laden der Webseite initial ausgewählt ist. Die Auswahl kann innerhalb der Gruppe vom Benutzer ggf. geändert werden. Der Code kann in HTML in verkürzter Form (ohne Wert) erfolgen. In XHTML muss man dagegen die lange Form (mit Wert) verwenden. Ein Beispielcode, wenn man initial den Radiobutton für Kunst als ausgewählt setzen möchte.
<!-- In HTML -->
<input type="radio" name="schulfach" value="kunst" checked>
<input type="radio" name="schulfach" value="natur">

<!-- In XHTML -->
<input type="radio" name="schulfach" value="kunst" checked="checked" />
<input type="radio" name="schulfach" value="natur" />

Man sollte sehr gut überlegen, welcher Radiobutton initial ausgewählt sein soll, da es durchaus vorkommt, dass ein Benutzer die Auswahl nicht ändert, obwohl eigentlich ein anderer Wert gewünscht ist, z.B. wenn es übersehen wurde. Außerdem sollte entschieden werden, welcher Radiobutton als ausgewählt gesetzt werden soll, wenn das Formular abgeschickt wurde und der Benutzer aufgrund fehlerhafter Eingaben wieder zur Formularseite geleitet wird.

Man kann das Formular an dieser Stelle z.B. in PHP so programmieren, dass bereits ausgewählte Radiobuttons das Attribut checked erhalten, damit die Benutzer die Auswahl nicht erneut tätigen müssen. Die meisten Benutzer möchten nämlich in solchen Fällen bereits gemachte Angaben nicht erneut durchführen. Ein erneutes Auswählen kann trotzdem in manchen Fällen notwendig sein.

  • disabled: Wenn bei einem Radiobutton das Attribut disabled gesetzt ist, dann ist es technisch gesehen nicht existent, sondern nur visuell (ausgegraut). Es kann nicht ausgewählt werden und es werden beim Abschicken des Formulars keine Daten für das Feld übertragen. Auch das Attribut disabled ist ein leeres Attribut und kann in HTML in verkürzter Form geschrieben werden. In XHTML ist die Langform notwendig. Ein Beispielcode.
<!-- In HTML -->
<input type="radio" name="schulfach" value="kunst" disabled>
<input type="radio" name="schulfach" value="natur">

<!-- In XHTML -->
<input type="radio" name="schulfach" value="kunst" disabled="disabled" />
<input type="radio" name="schulfach" value="natur" />

Häufig wird die berechtigte Frage gestellt, warum man ein Radiobutton deaktivieren sollte. Allein in HTML mag das unnötig sein sein. In Verbindung mit einer Programmierlösung können durchaus sinnvolle Lösungen entwickelt werden. Beispielsweise könnte man mit JavaScript und PHP ein Formular so programmieren, dass ein Radiobutton deaktiviert wird, solange eine Bedingung nicht erfüllt ist. So kann man bereits im Formular eine gewisse Plausibilität integrieren.

Attribute in HTML5

Ab HTML5 wurden für Formulare viele Neuerungen eingeführt. Folgende Attribute können für Radiobuttons wichtig sein.

  • form: Vor HTML5 musste man bei einem Formular alle zugehörigen Formularfelder innerhalb des zugehörigen FORM-Tags platzieren. Ab HTML5 ist das nicht mehr unbedingt notwendig. Ein Formularfeld kann auch außerhalb platziert und über das Attribut mit form="..." einem Formular zugewiesen werden. Für die Zuordnung wird als Wert die ID des Formulars eingetragen, die dem FORM-Tag zugewiesen wurde. Ein Beispielcode.
<!-- Ab HTML5 -->
<form id="formularid">
</form>

<!-- Radiobuttons außerhalb des FORM-Tags -->
<input type="radio" name="schulfach" value="kunst" form="formularid">
<input type="radio" name="schulfach" value="natur" form="formularid">
  • required: Definiert ein Pflichtfeld. Ist lediglich eine clientseitige Prüfung durch den Browser. Das Attribut macht bei Radiobuttons nur dann einen Sinn, wenn innerhalb einer Gruppe kein Radiobutton mit dem Attribut checked initial ausgewählt wird. Außerdem reicht es aus, das Attribut required bei nur einem Radiobutton zu setzen, um die Gruppe, zu der das Radiobutton gehört, zum Pflichtfeld zu machen. Man muss also nicht jedes Radiobutton mit dem Attribut versehen.
  • autofocus: Legt fest, dass nach dem Laden der Webseite der Focus auf das Radiobutton gelegt wird. Darf auf einer Seite nur einem Formularfeld zugewiesen werden.

Da ab HTML5 die Schreibweise nicht mehr relevant ist, kann man die verkürzte oder die lange Form (XHTML-Schreibweise) verwenden. Ein Beispielcode.

<!-- In HTML-Schreibweise -->
<input type="radio" name="schulfach" value="kunst" autofocus>
<input type="radio" name="schulfach" value="natur" required>

<!-- In XHTML-Schreibweise -->
<input type="radio" name="schulfach" value="kunst" autofocus="autofocus" />
<input type="radio" name="schulfach" value="natur" required="required" />

Inline-Element in Block-Element platzieren

Da der INPUT-Tag zu den Inline-Elementen gehört, müssen diese in Block-Elementen platziert werden, beispielsweise in einem DIV-Container. Die zuvor gezeigten Codes haben daher einen Schönheitsfehler und sollten für die richtige Syntax in Block-Elementen positioniert werden. Ein Beispielcode.

<div><input type="radio" name="schulfach" value="kunst"></div>
<div><<input type="radio" name="schulfach" value="natur"></div>

Die Formatierung des Radiobuttons und des umschließenden Block-Elements kann über CSS erfolgen.