<input type="radio"> – HTML-Attributwert

Probieren Sie es aus

<fieldset>
  <legend>Select a maintenance drone:</legend>

  <div>
    <input type="radio" id="huey" name="drone" value="huey" checked />
    <label for="huey">Huey</label>
  </div>

  <div>
    <input type="radio" id="dewey" name="drone" value="dewey" />
    <label for="dewey">Dewey</label>
  </div>

  <div>
    <input type="radio" id="louie" name="drone" value="louie" />
    <label for="louie">Louie</label>
  </div>
</fieldset>

p,
label {
  font:
    1rem "Fira Sans",
    sans-serif;
}

input {
  margin: 0.4rem;
}

Wert

Das Attribut value ist eine Zeichenfolge, die den Wert des Radio-Buttons enthält. Der User Agent zeigt diesen Wert den Benutzern nicht an. Stattdessen wird er verwendet, um zu erkennen, welcher Radio-Button einer Gruppe ausgewählt ist.

Eine Radio-Button-Gruppe definieren

Eine Radio-Button-Gruppe wird definiert, indem alle Radio-Buttons der Gruppe denselben Wert für name erhalten. Sobald eine Gruppe festgelegt ist, wird durch die Auswahl eines Radio-Buttons automatisch ein zuvor ausgewählter Radio-Button derselben Gruppe abgewählt.

Sie können beliebig viele Radio-Button-Gruppen auf einer Seite verwenden, solange jede einen eigenen, eindeutigen name hat.

Wenn Ihr Formular beispielsweise nach der bevorzugten Kontaktmethode fragen soll, könnten Sie drei Radio-Buttons erstellen. Bei allen setzen Sie die Eigenschaft name auf contact, während Sie für value jeweils email, phone beziehungsweise mail festlegen. Die Werte von value und name sind für Benutzer nicht sichtbar, sofern Sie nicht ausdrücklich Code hinzufügen, um sie anzuzeigen.

Das resultierende HTML sieht so aus:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Hier sehen Sie die drei Radio-Buttons. Bei jedem ist name auf contact gesetzt, und jeder hat einen eigenen value, der ihn innerhalb der Gruppe eindeutig identifiziert. Außerdem hat jeder eine eindeutige id. Über das Attribut for des <label>-Elements werden die Beschriftungen mit den Radio-Buttons verknüpft.

Sie können dieses Beispiel hier ausprobieren:

Darstellung der Daten einer Radio-Button-Gruppe

Wenn das obige Formular mit einem ausgewählten Radio-Button gesendet wird, enthalten die Formulardaten einen Eintrag der Form contact=value. Wenn der Benutzer beispielsweise den Radio-Button „Phone“ auswählt und anschließend das Formular sendet, enthalten die Formulardaten den Eintrag contact=phone.

Wenn Sie das Attribut value im HTML weglassen, wird der Gruppe in den gesendeten Formulardaten der Wert on zugewiesen. Wenn der Benutzer in diesem Fall die Option „Phone“ auswählt und das Formular sendet, lauten die resultierenden Formulardaten contact=on – das ist wenig hilfreich. Vergessen Sie daher nicht, die value-Attribute festzulegen!

In der Regel soll ein Formular nicht gesendet werden können, ohne dass in einer Gruppe ein Radio-Button ausgewählt ist. Daher ist es meist sinnvoll, einen Radio-Button standardmäßig mit checked auszuwählen. Weitere Informationen finden Sie unten unter Einen Radio-Button standardmäßig auswählen.

Ergänzen wir unser Beispiel um etwas Code, damit wir die von diesem Formular erzeugten Daten untersuchen können. Das HTML wird um einen <pre>-Block zur Ausgabe der Formulardaten erweitert:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>

Anschließend fügen wir etwas JavaScript hinzu, um einen Event-Listener für das Ereignis submit einzurichten. Dieses Ereignis wird ausgelöst, wenn der Benutzer auf die Schaltfläche „Submit“ klickt:

const form = document.querySelector("form");
const log = document.querySelector("#log");

form.addEventListener("submit", (event) => {
  const data = new FormData(form);
  let output = "";
  for (const entry of data) {
    output = `${output}${entry[0]}=${entry[1]}\r`;
  }
  log.innerText = output;
  event.preventDefault();
});

Probieren Sie das Beispiel aus und beobachten Sie, dass es für die Gruppe contact nie mehr als ein Ergebnis gibt.

Zusätzliche Attribute

Zusätzlich zu den gemeinsamen Attributen aller <input>-Elemente unterstützen radio-Eingabeelemente die folgenden Attribute.

checked

Ein boolesches Attribut, das angibt, dass dieser Radio-Button in der Gruppe standardmäßig ausgewählt ist, wenn es vorhanden ist.

Anders als andere Browser speichert Firefox standardmäßig den dynamischen Auswahlzustand eines <input> über das erneute Laden der Seite hinweg. Verwenden Sie das Attribut autocomplete, um dieses Verhalten zu steuern.

value

Das Attribut value haben alle <input>-Elemente gemeinsam. Bei Eingabeelementen vom Typ radio erfüllt es jedoch einen besonderen Zweck: Wenn ein Formular gesendet wird, werden nur die aktuell ausgewählten Radio-Buttons an den Server übermittelt. Der übermittelte Wert entspricht ihrem Attribut value. Wenn value nicht anderweitig festgelegt ist, lautet der Wert standardmäßig on. Dies wird oben im Abschnitt Wert gezeigt.

required

Das Attribut required wird von den meisten <input>-Elementen unterstützt. Wenn ein Radio-Button in einer Gruppe mit demselben name dieses Attribut hat, muss ein Radio-Button der Gruppe ausgewählt sein. Es muss jedoch nicht der Radio-Button sein, der das Attribut trägt.

radio-Eingabeelemente verwenden

Radio-Buttons ähneln in Aussehen und Funktionsweise den Drucktasten älterer Radiogeräte, wie dem unten abgebildeten.

Radio-Buttons ähneln Checkboxen, haben aber einen wichtigen Unterschied: Mit Radio-Buttons wird ein Wert aus einer Gruppe ausgewählt, während sich mit Checkboxen einzelne Werte unabhängig voneinander aktivieren und deaktivieren lassen. Bei mehreren Steuerelementen kann mit Radio-Buttons nur eines davon ausgewählt werden, mit Checkboxen dagegen mehrere.

Die Grundlagen von Radio-Buttons haben wir oben bereits behandelt. Sehen wir uns nun weitere häufig benötigte Funktionen und Techniken an.

Einen Radio-Button standardmäßig auswählen

Um einen Radio-Button standardmäßig auszuwählen, fügen Sie das Attribut checked hinzu, wie in dieser überarbeiteten Version des vorherigen Beispiels gezeigt:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

In diesem Fall ist nun der erste Radio-Button standardmäßig ausgewählt.

Die anklickbare Fläche von Radio-Buttons vergrößern

In den obigen Beispielen ist Ihnen vielleicht aufgefallen, dass Sie einen Radio-Button nicht nur durch einen Klick auf ihn selbst, sondern auch durch einen Klick auf sein zugehöriges <label>-Element auswählen können. Diese nützliche Funktion von HTML-Formularbeschriftungen erleichtert es Benutzern, die gewünschte Option anzuklicken – insbesondere auf Geräten mit kleinen Bildschirmen wie Smartphones.

Neben der Barrierefreiheit ist dies ein weiterer guter Grund, <label>-Elemente in Ihren Formularen korrekt einzurichten.

Validierung

Wenn ein Radio-Button das Attribut required hat oder mindestens ein Radio-Button in einer Gruppe mit demselben name dieses Attribut hat, muss ein Radio-Button ausgewählt sein, damit das Steuerelement als gültig gilt. Ist kein Radio-Button ausgewählt, gibt die Eigenschaft valueMissing eines ValidityState-Objekts bei der Validierung true zurück, und der Browser fordert den Benutzer auf, eine Option auszuwählen.

radio-Eingabeelemente gestalten

Das folgende Beispiel zeigt eine etwas ausführlichere Version des Beispiels, das wir im Laufe des Artikels verwendet haben. Es enthält zusätzliche Formatierungen und verbessert die Semantik durch den Einsatz spezieller Elemente. Das HTML sieht so aus:

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input
        type="radio"
        id="contactChoice1"
        name="contact"
        value="email"
        checked />
      <label for="contactChoice1">Email</label>

      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>

      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>

Das CSS in diesem Beispiel ist etwas umfangreicher:

html {
  font-family: sans-serif;
}

div:first-of-type {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

label {
  margin-right: 15px;
  line-height: 32px;
}

input {
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}

input:checked {
  border: 6px solid black;
}

button,
legend {
  color: white;
  background-color: black;
  padding: 5px 10px;
  border-radius: 0;
  border: 0;
  font-size: 14px;
}

button:hover,
button:focus {
  color: #999999;
}

button:active {
  background-color: white;
  color: black;
  outline: 1px solid black;
}

Besonders bemerkenswert ist hier die Verwendung der Eigenschaft appearance (mit Präfixen, die zur Unterstützung einiger Browser erforderlich sind). Standardmäßig werden Radio-Buttons (und Checkboxen) mit den nativen Stilen des Betriebssystems für diese Steuerelemente dargestellt. Mit appearance: none können Sie diese nativen Stile vollständig entfernen und eigene Stile erstellen. Hier verwenden wir border zusammen mit border-radius und transition, um beim Auswählen eines Radio-Buttons eine ansprechende Animation zu erzeugen. Beachten Sie auch, wie die Pseudoklasse :checked verwendet wird, um das Aussehen eines ausgewählten Radio-Buttons festzulegen.

Beachten Sie beim Anklicken eines Radio-Buttons den gleichmäßigen Überblendeffekt, während die beiden Schaltflächen ihren Zustand wechseln. Außerdem sind Stil und Farbe der Legende und der Schaltfläche zum Senden so angepasst, dass ein starker Kontrast entsteht. Für eine echte Webanwendung würden Sie sich vielleicht für ein anderes Aussehen entscheiden, aber das Beispiel zeigt die Möglichkeiten deutlich.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input> und die Schnittstelle HTMLInputElement, die es implementiert.
• RadioNodeList: die Schnittstelle, die eine Liste von Radio-Buttons beschreibt