Auswahl treffen: Checkbox und Radio

Zwei Feldtypen, bei denen der Nutzer nicht tippt, sondern wählt. Sie sehen ähnlich aus und verhalten sich grundverschieden.

01 / 04Radio: genau eines

<form action="/bestellen" method="get">
  <fieldset>
    <legend>Versandart</legend>

    <input type="radio" id="v1" name="versand" value="standard" checked>
    <label for="v1">Standard</label>

    <input type="radio" id="v2" name="versand" value="express">
    <label for="v2">Express</label>

    <input type="radio" id="v3" name="versand" value="abholung">
    <label for="v3">Selbst abholen</label>
  </fieldset>

  <button type="submit">Absenden</button>
</form>

Ein Radio-Feld ist der runde Knopf. Probier es aus: Sobald du einen auswählst, springt der vorherige heraus. Das ist der Punkt an Radios, es kann immer nur einer aktiv sein.

Und jetzt das Entscheidende: Diese Gruppe entsteht ausschließlich über den gemeinsamen name. Alle drei tragen name="versand", und deshalb weiß der Browser, dass sie zusammengehören.

<form action="/bestellen" method="get">
  <input type="radio" id="w1" name="a" value="standard">
  <label for="w1">Standard</label>

  <input type="radio" id="w2" name="b" value="express">
  <label for="w2">Express</label>

  <input type="radio" id="w3" name="c" value="abholung">
  <label for="w3">Selbst abholen</label>

  <button type="submit">Absenden</button>
</form>

Hier hat jedes Feld einen eigenen name, und du siehst sofort, was das bedeutet: Du kannst alle drei gleichzeitig anhaken. Schick das Formular ab, dann stehen in der Adresszeile drei Paare nebeneinander: ?a=standard&b=express&c=abholung. Für den Browser sind das drei unabhängige Fragen, jede mit einer einzigen Antwortmöglichkeit.

Das ist der klassische Stolperstein bei Radios, und er ist schwer zu finden, weil das Markup korrekt aussieht.

02 / 04value: was ankommt

Beim Textfeld ist der Wert das, was der Nutzer tippt. Bei Radios gibt es nichts zu tippen, also legst du den Wert selbst fest, mit value.

Wählt jemand „Express“, schickt der Browser das Paar versand=express. Der name ist die Frage, der value die Antwort. Deshalb steht in der Gruppe derselbe name und in jedem Feld ein anderer value.

Sieh es dir an: Wähl im ersten Beispiel „Express“ und klick auf Absenden. In der Adresszeile steht /bestellen?versand=express. Die Adresse /bestellen gibt es hier nicht, die Seite meldet das auch, aber darum geht es nicht: Interessant ist, was hinter dem Fragezeichen steht.

Fehlt value, überträgt der Browser den Ersatzwert on, und der Server bekommt versand=on, ohne zu wissen, welche der drei Optionen gemeint war. Nimm im Beispiel testweise das value beim zweiten Radio heraus, wähl es und schick ab: In der Adresszeile steht dann ?versand=on. Also: Bei Radios und Checkboxen gehört immer ein value dazu.

checked ist ein Boolean-Attribut und wählt eine Option vor. Bei Radios ist eine Vorauswahl oft sinnvoll, sonst kann der Nutzer versehentlich gar nichts wählen und das Formular kommt ohne diesen Wert an. Wenn es keine sinnvolle Vorgabe gibt, etwa bei einer Anrede oder einer Zustimmung, ist required an einem der Radios der bessere Weg: Damit gilt die ganze Gruppe als Pflicht, und trotzdem hat niemand vorab für den Nutzer geantwortet.

03 / 04Checkbox: beliebig viele

<form action="/bestellen" method="get">
  <fieldset>
    <legend>Was soll dazu?</legend>

    <input type="checkbox" id="c1" name="extras" value="brot">
    <label for="c1">Brot</label>

    <input type="checkbox" id="c2" name="extras" value="salat" checked>
    <label for="c2">Salat</label>

    <input type="checkbox" id="c3" name="extras" value="nachtisch">
    <label for="c3">Nachtisch</label>
  </fieldset>

  <button type="submit">Absenden</button>
</form>

Checkboxen sind die eckigen Kästchen und arbeiten unabhängig voneinander. Jede lässt sich einzeln an- und abhaken, auch wenn sie denselben name tragen.

Bei Checkboxen kann derselbe name trotzdem sinnvoll sein, so wie hier: Alle drei heißen extras, und der Server bekommt dann eine Liste aller angehakten Werte. Genauso gut kann jede Checkbox ihren eigenen name haben, wenn sie eine eigene Ja-Nein-Frage ist („Newsletter abonnieren“).

Wichtig zu wissen: Eine nicht angehakte Checkbox wird gar nicht übertragen. Es kommt kein nein und kein false an, sondern schlicht kein Eintrag. Auch das steht in der Adresszeile: Im Beispiel ist nur „Salat“ vorgehakt, und nach dem Absenden steht dort ?extras=salat, von den anderen beiden keine Spur. Wer serverseitig auswertet, prüft also auf Anwesenheit, nicht auf einen Wert.

04 / 04fieldset und legend

In beiden Beispielen steckt die Gruppe in einem fieldset mit einer legend. Das ist mehr als ein Rahmen.

Die einzelnen label beschriften jede Option („Express“). Was fehlt, ist die Frage dazu („Versandart“). Ein Screenreader liest ohne fieldset nur „Express, Auswahlfeld, eins von drei“ vor, und was ausgewählt werden soll, bleibt offen.

Mit fieldset und legend liest er „Versandart, Express, Auswahlfeld, eins von drei“. Erst damit ist die Frage vollständig. Deshalb gehört bei jeder Radio-Gruppe und jeder zusammengehörigen Checkbox-Gruppe ein fieldset dazu.