<input>-Elemente vom Typradio werden in der Regel inRadiogruppen verwendet – Sammlungen von Optionsfeldern, die eine Gruppe verwandter Optionen beschreiben.

In einer gegebenen Gruppe kann immer nur ein Optionsfeld ausgewählt werden. Optionsfelder werden normalerweise als kleine Kreise angezeigt, die ausgefüllt oder hervorgehoben werden, wenn sie ausgewählt sind.

Probieren Sie es aus

<fieldset>  <legend>Select a maintenance drone:</legend>  <div>    <input type="radio" name="drone" value="huey" checked />    <label for="huey">Huey</label>  </div>  <div>    <input type="radio" name="drone" value="dewey" />    <label for="dewey">Dewey</label>  </div>  <div>    <input type="radio" name="drone" value="louie" />    <label for="louie">Louie</label>  </div></fieldset>

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

Sie werden Radiobuttons genannt, weil sie wie die Druckknöpfe auf altmodischen Radios aussehen und funktionieren, wie das unten gezeigte Beispiel.

Wert

Dasvalue-Attribut ist ein String, der den Wert des Radiobuttons enthält. Der Wert wird dem Benutzer von ihremUser-Agent nie angezeigt. Stattdessen wird er verwendet, um zu identifizieren, welcher Radiobutton in einer Gruppe ausgewählt ist.

Eine Radiogruppe definieren

Eine Radiogruppe wird definiert, indem jedem Radiobutton in der Gruppe derselbename zugewiesen wird. Sobald eine Radiogruppe eingerichtet ist, wird bei der Auswahl eines Radiobuttons in dieser Gruppe jedes aktuell ausgewählte Radiobutton in derselben Gruppe automatisch abgewählt.

Sie können auf einer Seite so viele Radiogruppen haben, wie Sie möchten, solange jede einen eindeutigenname hat.

Zum Beispiel, wenn Ihr Formular den Benutzer nach seiner bevorzugten Kontaktmethode fragen muss, könnten Sie drei Radiobuttons erstellen, von denen jeder diename-Eigenschaft aufcontact gesetzt hat, aber einer mit dem Wertemail, einer mit dem Wertphone und einer mit dem Wertmail. Der Benutzer sieht weder denvalue noch denname (es sei denn, Sie fügen ausdrücklich Code hinzu, um ihn anzuzeigen).

Das resultierende HTML sieht so aus:

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

Hier sehen Sie die drei Radiobuttons, von denen jeder denname aufcontact gesetzt hat und jeder einen eindeutigenvalue hat, der diesen individuellen Radiobutton innerhalb der Gruppe eindeutig identifiziert. Sie haben auch jeweils eine einzigartigeid, die vom<label>-Element verleihenfor-Attribut verwendet wird, um die Labels mit den Radiobuttons zu verknüpfen.

Sie können dieses Beispiel hier ausprobieren:

Datenrepräsentation einer Radiogruppe

Wenn das obige Formular mit einem ausgewählten Radiobutton abgeschickt wird, enthält die Formulardaten ein Eintrag im Formularcontact=value. Zum Beispiel, wenn der Benutzer auf den "Phone"-Radiobutton klickt und dann das Formular abschickt, enthalten die Formulardaten die Zeilecontact=phone.

Wenn Sie dasvalue-Attribut im HTML weglassen, weist die eingereichte Formulardaten der Gruppe den Werton zu. In diesem Szenario, wenn der Benutzer die Option "Phone" ausgewählt und das Formular eingereicht hat, wären die resultierenden Formulardatencontact=on, was nicht hilfreich ist. Vergessen Sie daher nicht, Ihrevalue-Attribute zu setzen!

Es ist ziemlich ungewöhnlich, tatsächlich zu wollen, dass das Formular eingereicht wird, ohne dass einer der Radiobuttons in einer Gruppe ausgewählt ist, daher ist es normalerweise ratsam, einen auf den Zustandchecked voreinzustellen. SieheEinen Radiobutton standardmäßig auswählen unten.

Lassen Sie uns ein wenig Code zu unserem Beispiel hinzufügen, damit wir die von diesem Formular erzeugten Daten untersuchen können. Das HTML wird überarbeitet, um einen<pre>-Block hinzuzufügen, um die Formulardaten darin auszugeben:

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

Dann fügen wir etwasJavaScript hinzu, um einen Ereignislistener für dassubmit-Ereignis festzulegen, das gesendet wird, wenn der Benutzer 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 dieses Beispiel aus und sehen Sie, dass niemals mehr als ein Ergebnis für diecontact-Gruppe vorhanden ist.

Zusätzliche Attribute

Zusätzlich zu den gemeinschaftlichen Attributen, die von allen<input>-Elementen geteilt werden, unterstützenradio-Inputs die folgenden Attribute.

checked

Ein Boolean-Attribut, das, falls vorhanden, angibt, dass dieser Radiobutton der standardmäßig ausgewählte in der Gruppe ist.

Im Gegensatz zu anderen Browsern behält Firefox standardmäßig dendynamischen checked-Zustand eines<input>-Elements über Seitenladevorgänge hinweg bei. Verwenden Sie dasautocomplete-Attribut, um diese Funktion zu steuern.

value

Dasvalue-Attribut ist eines, das alle<input>-Elemente teilen; es hat jedoch eine besondere Bedeutung für Inputs vom Typradio: Wenn ein Formular abgeschickt wird, werden nur Radiobuttons, die derzeit ausgewählt sind, an den Server gesendet und der gemeldete Wert ist der Wert desvalue-Attributs. Wenn dervalue nicht anderweitig angegeben ist, ist es standardmäßig der Stringon. Dies wird im AbschnittWert oben veranschaulicht.

required

Dasrequired-Attribut ist eines, das die meisten<input>-Elemente teilen. Wenn ein Radiobutton in einer gleichnamigen Gruppe von Radiobuttons dasrequired-Attribut hat, muss ein Radiobutton in dieser Gruppe ausgewählt sein, obwohl es nicht derjenige mit dem angewandten Attribut sein muss.

Verwendung von Radio-Inputs

Wir haben die Grundlagen von Radiobuttons oben bereits behandelt. Schauen wir uns nun die anderen üblichen, mit Radiobuttons verbundenen Funktionen und Techniken an, die Sie kennen sollten.

Einen Radiobutton standardmäßig auswählen

Um einen Radiobutton standardmäßig ausgewählt zu machen, fügen Sie daschecked-Attribut hinzu, wie in dieser überarbeiteten Version des vorherigen Beispiels dargestellt:

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

In diesem Fall ist der erste Radiobutton nun standardmäßig ausgewählt.

Eine größere Trefferfläche für Ihre Radiobuttons bereitstellen

In den obigen Beispielen haben Sie vielleicht bemerkt, dass Sie einen Radiobutton auswählen können, indem Sie auf das zugehörige<label>-Element klicken, sowie auf den Radiobutton selbst. Dies ist eine wirklich nützliche Funktion von HTML-Formular-Labels, die es den Benutzern erleichtert, die gewünschte Option auszuwählen, insbesondere auf Geräten mit kleinen Bildschirmen wie Smartphones.

Abgesehen von der Zugänglichkeit ist dies ein weiterer guter Grund,<label>-Elemente in Ihren Formularen korrekt einzurichten.

Validierung

Im Fall eines Radiobuttons mit demrequired-Attribut oder einer gleichnamigen Gruppe von Radiobuttons, in der mindestens ein Mitgliedrequired gesetzt hat, muss ein Radiobutton ausgewählt sein, damit die Kontrolle als gültig angesehen wird. Wenn kein Radiobutton ausgewählt ist, wird dievalueMissing-Eigenschaft einesValidityState-Objekts während der Validierungtrue zurückgeben, und der Browser wird den Benutzer auffordern, eine Option auszuwählen.

Styling von Radio-Inputs

Das folgende Beispiel zeigt eine etwas umfassendere Version des Beispiels, das wir im gesamten Artikel gesehen haben, mit zusätzlichem Styling und besseren Semantiken, die durch die Verwendung spezialisierter Elemente etabliert wurden. Das HTML sieht so aus:

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

Der CSS-Teil 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;}

Am bemerkenswertesten hierbei ist die Verwendung derappearance-Eigenschaft (mit Präfixen, die benötigt werden, um einige Browser zu unterstützen). Standardmäßig sind Radiobuttons (undCheckboxen) mit den nativen Stilen des Betriebssystems für diese Steuerelemente gestylt. Indem Sieappearance: none angeben, können Sie das native Styling vollständig entfernen und eigene Stile dafür erstellen. Hier haben wir einenborder zusammen mitborder-radius und einetransition verwendet, um eine schöne animierende Radio-Auswahl zu erstellen. Beachten Sie auch, wie die:checked-Pseudo-Klasse verwendet wird, um die Stile für das Erscheinungsbild des Radiobuttons bei Auswahl anzugeben.

Beachten Sie, dass beim Klicken auf einen Radiobutton ein schönes, sanftes Ein-/Ausblendeffekt zu sehen ist, während die beiden Buttons den Zustand wechseln. Darüber hinaus sind Stil und Farbgebung der Legende und der Abschick-Schaltfläche angepasst, um einen starken Kontrast zu haben. Dies ist vielleicht nicht unbedingt der Look, den Sie in einer echten Webanwendung wünschen, aber es zeigt definitiv die Möglichkeiten auf.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <input> und dieHTMLInputElement-Schnittstelle, die es implementiert.
• RadioNodeList: die Schnittstelle, die eine Liste von Radiobuttons beschreibt.