<input type="radio">

Sie werden als Optionsfelder bezeichnet, weil sie ähnlich aussehen und funktionieren wie die Druckknöpfe an altmodischen Radios, wie dem unten gezeigten.

Das value-Attribut ist ein String, der den Wert des Optionsfeldes enthält. Der Wert wird dem Nutzer von deren User-Agent niemals angezeigt. Stattdessen wird er verwendet, um zu identifizieren, welches Optionsfeld in einer Gruppe ausgewählt ist.

Eine Radiogruppe wird definiert, indem jedem Optionsfeld in der Gruppe das gleiche name gegeben wird. Sobald eine Radiogruppe festgelegt ist, hebt das Auswählen eines beliebigen Optionsfeldes in dieser Gruppe automatisch die Auswahl eines aktuell ausgewählten Optionsfeldes in derselben Gruppe auf.

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

Zum Beispiel, wenn Ihr Formular den Nutzer nach der bevorzugten Kontaktmethode fragen muss, könnten Sie drei Optionsfelder erstellen, jedes mit der name-Eigenschaft auf contact gesetzt, aber eines mit dem Wert email, eines mit dem Wert phone und eines mit dem Wert mail. Der Nutzer sieht den value oder den name nie (es sei denn, Sie fügen ausdrücklich Code hinzu, um ihn anzuzeigen).

Das resultierende HTML sieht wie folgt 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 eindeutigen value, das dieses individuelle Optionsfeld innerhalb der Gruppe identifiziert. Sie haben auch jeweils eine eindeutige 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 Formulardaten ein Eintrag im Format contact=value. Beispielsweise, wenn der Nutzer auf das "Phone"-Optionsfeld klickt und das Formular übermittelt, würden die Formulardaten die Zeile contact=phone enthalten.

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

Es ist ziemlich unüblich, tatsächlich zu wünschen, dass das Formular eingereicht wird, ohne dass eines der Optionsfelder in einer Gruppe ausgewählt ist. Daher ist es normalerweise klug, eines standardmäßig auf den checked Zustand zu setzen. Siehe Ein Optionsfeld standardmäßig auswählen unten.

Fügen wir ein wenig Code zu unserem Beispiel hinzu, damit wir die von diesem Formular generierten Daten untersuchen können. Das HTML 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 Event-Listener auf das submit Ereignis zu registrieren, welches gesendet wird, wenn der Nutzer auf den "Submit"-Button 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.

Neben den allgemeinen Attributen, die alle <input> Elemente teilen, unterstützen radio Eingaben die folgenden Attribute.

checked

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

Im Gegensatz zu anderen Browsern speichert Firefox standardmäßig den dynamischen Checked-Zustand eines <input> über Seitenladezyklen hinweg. Verwenden Sie das autocomplete Attribut, um diese Funktion zu steuern.

value

Das value-Attribut ist eines, welches alle <input>s teilen; jedoch dient es einem besonderen Zweck für Eingaben des Typs radio: Wenn ein Formular übermittelt wird, werden nur diejenigen Optionsfelder, die gerade aktiviert sind, an den Server gesendet, und der gemeldete Wert ist der des value Attributs. Wenn value nicht anderweitig spezifiziert ist, ist es standardmäßig der String on, wie in der Section Wert oben demonstriert.

required

Das required-Attribut wird von den meisten <input>s geteilt. Wenn ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern das required-Attribut hat, muss ein Optionsfeld in dieser Gruppe aktiviert sein, obwohl es nicht das sein muss, auf das das Attribut angewendet wurde.

Wir haben die Grundlagen der Optionsfelder bereits oben behandelt. Lassen Sie uns nun die anderen häufigen Funktionen und Techniken im Zusammenhang mit Optionsfeldern betrachten, die Sie möglicherweise kennen sollten.

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 nun standardmäßig ausgewählt.

In den obigen Beispielen haben Sie vielleicht bemerkt, dass Sie ein Optionsfeld auswählen können, indem Sie auf das zugehörige <label> Element klicken, ebenso wie auf das Optionsfeld selbst. Dies ist eine sehr nützliche Funktion von HTML-Formular-Labels, die es Nutzern erleichtert, die gewünschte Option anzuklicken, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

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

Bei einem Optionsfeld mit dem gesetzten required Attribut oder einer gleichnamigen Gruppe von Optionsfeldern, in der mindestens ein Mitglied required gesetzt 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 während der Validierung true zurück, und der Browser wird den Benutzer bitten, eine Option auszuwählen.

Das folgende Beispiel zeigt eine etwas gründlichere Version des Beispiels, das wir im gesamten Artikel gesehen haben, mit zusätzlichem Styling und mit besseren Semantiken, die durch die Verwendung spezieller Elemente hergestellt wurden. 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 hier ist der Einsatz der appearance Eigenschaft (mit Präfixen, die zur Unterstützung einiger Browser benötigt werden). Standardmäßig werden Optionsfelder (und Checkboxen) mit den nativen Styles des Betriebssystems für diese Steuerungen versehen. Durch die Angabe von appearance: none können Sie das native Styling vollständig entfernen und Ihre eigenen Styles für sie erstellen. Hier haben wir einen border zusammen mit border-radius und einem transition verwendet, um eine schöne animierende Optionsauswahl zu erstellen. Beachten Sie auch, wie die :checked Pseudo-Klasse verwendet wird, um die Styles für das Erscheinungsbild des Optionsfeldes festzulegen, wenn es ausgewählt ist.

Beachten Sie, dass beim Klicken auf ein Optionsfeld ein schöner, sanfter Ein-/Ausblendeffekt auftritt, während die beiden Buttons den Zustand ändern. Darüber hinaus sind der Stil und die Färbung der Legende und des Absende-Buttons angepasst, um einen starken Kontrast zu haben. Dies ist möglicherweise nicht der 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, die eine Liste von Optionsfeldern beschreibt
• Kompatibilität von CSS-Eigenschaften