<input type="radio">

Sie werden als Optionsfelder bezeichnet, weil sie ähnlich aussehen und funktionieren wie die Drucktasten auf altmodischen Radios, wie das unten gezeigte.

Das value-Attribut ist eine Zeichenkette, die den Wert des Optionsfeldes enthält. Der Wert wird dem Benutzer durch deren User-Agent nie angezeigt. Stattdessen wird es verwendet, um zu kennzeichnen, welches Optionsfeld in einer Gruppe ausgewählt ist.

Eine Radiogruppe wird definiert, indem jedem Optionsfeld in der Gruppe derselbe name zugewiesen wird. Sobald eine Radiogruppe festgelegt ist, hebt die Auswahl eines beliebigen Optionsfeldes in dieser Gruppe automatisch die Auswahl jedes derzeit ausgewählten Optionsfeldes in derselben Gruppe auf.

Sie können auf einer Seite beliebig viele Radiogruppen haben, solange jede einen eindeutigen name hat.

Zum Beispiel, wenn Ihr Formular den Benutzer nach seiner bevorzugten Kontaktmethode fragt, könnten Sie drei Optionsfelder erstellen, jedes mit der Eigenschaft name auf contact gesetzt, aber eines mit dem Wert email, eines mit dem Wert phone und eines mit dem Wert mail. Der Benutzer sieht weder den value noch den name (es sei denn, Sie fügen ausdrücklich Code hinzu, um dies 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 Optionsfelder, jedes mit dem name auf contact gesetzt und jedes mit einem einzigartigen value, der dieses einzelne Optionsfeld innerhalb der Gruppe eindeutig kennzeichnet. Sie haben auch alle eine einzigartige id, die vom <label>-Element über das 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 übermittelt wird, enthält die Formular-Daten einen Eintrag im Formular contact=value. Zum Beispiel, wenn der Benutzer das Optionsfeld "Phone" auswählt und dann das Formular absendet, enthalten die Formular-Daten die Zeile contact=phone.

Wenn Sie das value-Attribut im HTML weglassen, weist die übermittelten Formulardaten der Gruppe den Wert on zu. In diesem Szenario, wenn der Benutzer auf die Option "Phone" klickt und das Formular übermittelt, lauten die resultierenden Formulardaten contact=on, was nicht hilfreich ist. Vergessen Sie also nicht, Ihre value-Attribute festzulegen!

Es ist ziemlich unüblich, tatsächlich zuzulassen, dass das Formular abgesendet wird, ohne dass eines der Optionsfelder in einer Gruppe ausgewählt ist, daher ist es gewöhnlich sinnvoll, eines standardmäßig im checked-Status zu haben. Siehe Automatische Auswahl eines Optionsfeldes unten.

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

<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 auf 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, dass es nie mehr als ein Ergebnis für die contact-Gruppe gibt.

Zusätzlich zu den gemeinsamen Attributen, die alle <input>-Elemente teilen, unterstützen radio-Eingabefelder die folgenden Attribute.

checked

Ein boolesches Attribut, das, falls vorhanden, angibt, dass dieses Optionsfeld das standardmäßig ausgewählte in der Gruppe ist.

Anders als in anderen Browsern behält Firefox standardmäßig den dynamischen checked-Zustand eines <input> über Seitenladevorgänge hinweg bei. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu steuern.

value

Das value-Attribut wird von allen <input>s geteilt; es erfüllt jedoch einen speziellen Zweck für Eingabefelder des Typs radio: Wenn ein Formular gesendet wird, werden nur die derzeit markierten Optionsfelder an den Server übermittelt, und der gemeldete Wert ist der Wert des value-Attributs. Wenn das value nicht anders angegeben ist, ist es standardmäßig die Zeichenkette on. Dies wird im Abschnitt Wert oben demonstriert.

required

Das required-Attribut wird von den meisten <input>s geteilt. Wenn ein Optionsfeld in einer Gruppe von Optionsfeldern mit demselben Namen das required-Attribut hat, muss ein Optionsfeld in dieser Gruppe markiert sein, obwohl es nicht dasjenige mit dem angewendeten Attribut sein muss.

Wir haben bereits die Grundlagen von Optionsfeldern oben behandelt. Schauen wir uns nun die anderen gängigen Funktionen und Techniken an, die Sie über Optionsfelder wissen müssen.

Um ein Optionsfeld standardmäßig auszuwählen, 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 möglicherweise bemerkt, dass Sie ein Optionsfeld durch Klicken auf das zugehörige <label>-Element auswählen können, ebenso wie auf das Optionsfeld selbst. Dies ist eine wirklich nützliche Funktion von HTML-Formularlabels, die es Benutzern erleichtert, die gewünschte Option auszuwählen, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

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

Im Fall eines Optionsfeldes mit dem gesetzten required-Attribut oder einer Gruppe von Optionsfeldern mit demselben Namen, in der mindestens ein Mitglied required gesetzt hat, muss ein Optionsfeld ausgewählt sein, damit die Steuerung als gültig angesehen wird. Wenn kein Optionsfeld markiert ist, wird die valueMissing-Eigenschaft eines ValidityState-Objekts bei der Validierung true zurückgeben und der Browser wird den Benutzer bitten, eine Option auszuwählen.

Das folgende Beispiel zeigt eine etwas umfassendere Version des Beispiels, das wir im gesamten Artikel gesehen haben, mit zusätzlichem Styling und besserer Semantik, die durch die Verwendung spezialisierter Elemente hergestellt wird. 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 in diesem Beispiel verwendete CSS 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;
}

Am bemerkenswertesten ist hier die Verwendung der appearance-Eigenschaft (mit Präfixen, die zur Unterstützung einiger Browser erforderlich sind). Standardmäßig werden Optionsfelder (und Checkboxen) mit den nativen Stilen des Betriebssystems für diese Steuerungen gestylt. Durch die Angabe von appearance: none können Sie das native Styling vollständig entfernen und Ihre eigenen Stile dafür erstellen. Hier haben wir eine border zusammen mit border-radius und eine transition verwendet, um eine schöne animierte Optionsfeldauswahl zu erstellen. Beachten Sie auch, wie die :checked-Pseudo-Klasse verwendet wird, um die Stile für das Erscheinungsbild des Optionsfeldes bei Auswahl zu spezifizieren.

Beachten Sie, dass es beim Klicken auf ein Optionsfeld einen schönen, sanften Aus- und Einblendeffekt gibt, wenn die beiden Schaltflächen den Zustand wechseln. Darüber hinaus sind der Stil und die Färbung der Legende und der Absendeschaltfläche so angepasst, dass sie einen starken Kontrast aufweisen. Dies ist möglicherweise nicht das Erscheinungsbild, das Sie in einer echten Webanwendung haben möchten, aber es zeigt definitiv die Möglichkeiten auf.

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