<input type="radio">

<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;
}

Sie werden als Optionsfelder bezeichnet, weil sie ähnlich aussehen und funktionieren wie die Druckknöpfe alter Radios, wie im folgenden Bild gezeigt.

Das Attribut value ist eine Zeichenfolge, die den Wert des Optionsfeldes enthält. Der Wert wird dem Benutzer von dessen Benutzeragent niemals angezeigt. Stattdessen wird er verwendet, um zu identifizieren, welches Optionsfeld in einer Gruppe ausgewählt ist.

Eine Radiogruppe wird definiert, indem jeder Radioknopf in der Gruppe den gleichen name erhält. Sobald eine Radiogruppe festgelegt ist, wird durch das Auswählen eines beliebigen Radioknopfs in dieser Gruppe automatisch jeder bereits ausgewählte Radioknopf derselben Gruppe deselektiert.

Sie können so viele Radiogruppen auf einer Seite haben, wie Sie möchten, solange jede einen einzigartigen name besitzt.

Zum Beispiel, wenn Ihr Formular den Benutzer nach seiner bevorzugten Kontaktmethode fragen muss, könnten Sie drei Radioknöpfe erstellen, jeder mit der name-Eigenschaft auf contact gesetzt, aber einem mit dem Wert email, einem mit dem Wert phone und einem mit dem Wert mail. Der Benutzer sieht weder den value noch den name (es sei denn, Sie fügen ausdrücklich Code hinzu, um ihn anzuzeigen).

Der resultierende HTML-Code sieht folgendermaßen 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 Radioknöpfe, jeder mit dem name auf contact gesetzt und jeder mit einem einzigartigen value, der dieses individuelle Optionsfeld innerhalb der Gruppe eindeutig identifiziert. Sie haben auch alle eine einzigartige id, die vom <label>-Element mit dem for-Attribut verwendet wird, um die Labels mit den Optionsfeldern zu verknüpfen.

Sie können dieses Beispiel hier ausprobieren:

Wenn das obige Formular mit einem ausgewählten Optionsfeld abgeschickt wird, enthält die Formulardaten ein Eintrag im Formular contact=value. Beispielsweise, wenn der Benutzer auf das Optionsfeld "Phone" klickt und dann das Formular absendet, enthalten die Formulardaten die Zeile contact=phone.

Wenn Sie das Attribut value im HTML weglassen, weist die übermittelte Formulardaten der Gruppe den Wert on zu. In diesem Szenario würde das endgültige Formulardaten contact=on sein, wenn der Benutzer auf die Option "Phone" geklickt und das Formular abgesendet hat, was nicht hilfreich ist. Vergessen Sie daher nicht, Ihre value-Attribute festzulegen!

Es ist eher unüblich, tatsächlich zuzulassen, dass das Formular abgeschickt wird, ohne dass eines der Optionsfelder in einer Gruppe ausgewählt ist. Es ist daher in der Regel sinnvoll, eines von ihnen standardmäßig als checked festzulegen. Siehe Ein Optionsfeld standardmäßig auswählen unten.

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

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

Dann fügen wir etwas JavaScript hinzu, um einen Ereignis-Listener für das submit-Ereignis einzurichten, das gesendet wird, 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();
  },
  false,
);

Probieren Sie dieses Beispiel aus und sehen Sie, wie niemals mehr als ein Ergebnis für die contact-Gruppe vorhanden ist.

Zusätzlich zu den allgemeinen Attributen, die alle <input>-Elemente gemeinsam haben, unterstützen radio-Inputs die folgenden Attribute.

checked

Ein Boolean-Attribut, das, wenn vorhanden, anzeigt, dass dieses Optionsfeld das standardmäßig ausgewählte innerhalb der Gruppe ist.

Im Gegensatz zu anderen Browsern speichert Firefox standardmäßig den dynamischen checked-Zustand eines <input> über Seitenladungen hinweg. Verwenden Sie das autocomplete-Attribut, um dieses Feature zu steuern.

value

Das value-Attribut ist eines, das alle <input>s gemeinsam haben; es dient jedoch einem besonderen Zweck für Eingaben des Typs radio: Wenn ein Formular abgesendet wird, werden nur die aktuell ausgewählten Optionsfelder an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Wenn der value nicht explizit angegeben wird, ist es standardmäßig die Zeichenkette on. Dies wird im Abschnitt Wert oben demonstriert.

required

Das required-Attribut ist eines, das die meisten <input>s gemeinsam haben. Wenn ein Optionsfeld in einer Gruppe von Optionsfeldern mit demselben Namen das required-Attribut besitzt, muss ein Optionsfeld in dieser Gruppe ausgewählt werden, obwohl es nicht dasjenige sein muss, auf das das Attribut angewendet wurde.

Wir haben die Grundlagen der Optionsfelder bereits oben behandelt. Lassen Sie uns nun auf die anderen häufigen, optionsfeldbezogenen Funktionen und Techniken eingehen, die Sie möglicherweise kennen müssen.

Um ein Optionsfeld standardmäßig ausgewählt zu haben, fügen Sie das checked-Attribut 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 das erste Optionsfeld jetzt standardmäßig ausgewählt.

In den obigen Beispielen haben Sie vielleicht bemerkt, dass Sie ein Optionsfeld durch Klicken auf sein zugehöriges <label>-Element sowie auf das Optionsfeld selbst auswählen können. Dies ist eine wirklich nützliche Funktion von HTML-Formularlabels, die es Benutzern erleichtert, die gewünschte Option auszuwählen, insbesondere bei Geräten mit kleinen Bildschirmen wie Smartphones.

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

Im Falle eines Optionsfeldes mit dem required-Attribut oder einer gleichnamigen Gruppe von Optionsfeldern, in der mindestens ein Mitglied required hat, muss ein Optionsfeld ausgewählt werden, damit die Steuerung als gültig betrachtet wird. Wenn kein Optionsfeld ausgewählt ist, gibt die valueMissing-Eigenschaft eines ValidityState-Objekts bei der Validierung true zurück, und der Browser fordert den Benutzer auf, eine Option auszuwählen.

Das folgende Beispiel zeigt eine etwas ausgereiftere Version des Beispiels, das wir im gesamten Artikel gesehen haben, mit zusätzlichem Styling und einer besseren Semantik, die durch die Verwendung spezialisierter Elemente etabliert wird. Der HTML-Code sieht folgendermaßen 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 #999;
  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: #999;
}

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

Besonders bemerkenswert hier ist die Verwendung der appearance-Eigenschaft (mit Präfixen, die zur Unterstützung einiger Browser benötigt werden). Standardmäßig werden Optionsfelder (und Checkboxes) mit den nativen Stilen des Betriebssystems für diese Steuerungen gestylt. Indem Sie appearance: none angeben, können Sie die native Stilgebung vollständig entfernen und Ihre eigenen Stile für sie erstellen. Hier haben wir einen border zusammen mit border-radius und einen transition verwendet, um eine schöne animierte Auswahl des Radios zu erstellen. Beachten Sie auch, wie die :checked-Pseudoklasse verwendet wird, um die Stile für das Aussehen des Optionsfelds, wenn es ausgewählt ist, zu spezifizieren.

Beachten Sie, dass beim Klicken auf ein Optionsfeld ein schöner, sanfter Ausblend-/Einblendeffekt auftritt, während sich die beiden Schaltflächenstatus ändern. Außerdem sind der Stil und die Farbgebung der Legende und der Absende-Schaltfläche so angepasst, dass sie einen starken Kontrast aufweisen. Dies ist möglicherweise kein Look, den Sie in einer echten Webanwendung wünschen, aber es zeigt definitiv die Möglichkeiten.

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