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

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

Wert

Das value-Attribut ist eine Zeichenkette, die den Wert des Optionsfelds enthält. Der Wert wird den Nutzern von ihrem User-Agent nie direkt angezeigt. Stattdessen wird er verwendet, um zu identifizieren, welches Optionsfeld in einer Gruppe ausgewählt ist.

Definition einer Radiogruppe

Eine Radiogruppe wird definiert, indem jedem der Optionsfelder in der Gruppe dasselbe name zugewiesen wird. Sobald eine Radiogruppe definiert ist, hebt die Auswahl eines beliebigen Optionsfelds in dieser Gruppe automatisch die Auswahl des aktuell in derselben Gruppe ausgewählten Optionsfelds auf.

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

Zum Beispiel, wenn Ihr Formular den Nutzer nach seiner bevorzugten Kontaktmethode fragen muss, können Sie drei Optionsfelder erstellen, die alle die name-Eigenschaft contact haben, aber eines hat den Wert email, eines den Wert phone und eines den Wert mail. Der Benutzer sieht nie den value oder den name (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" 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 einzelne Optionsfeld innerhalb der Gruppe eindeutig identifiziert. Sie haben auch jeweils eine eindeutige id, die vom <label>-Element-Attribut for verwendet wird, um die Labels mit den Optionsfeldern zu verbinden.

Sie können dieses Beispiel hier ausprobieren:

Datenrepräsentation einer Radiogruppe

Wenn das obige Formular mit einem ausgewählten Optionsfeld abgeschickt wird, umfasst die Formulardaten einen Eintrag im Formular contact=value. Zum Beispiel, wenn der Nutzer auf den "Phone"-Optionsfeld klickt und das Formular abschickt, werden die Formulardaten die Zeile contact=phone enthalten.

Wenn Sie das value-Attribut im HTML weglassen, weist die abgeschickte Formulardaten der Gruppe den Wert on zu. In diesem Szenario, wenn der Benutzer auf die "Phone"-Option klickt und das Formular abschickt, würden die resultierenden Formulardaten contact=on sein, was nicht hilfreich ist. Also vergessen Sie nicht, Ihre value-Attribute zu setzen!

Es ist ziemlich ungewöhnlich, tatsächlich zu erlauben, dass das Formular abgeschickt wird, ohne dass eines der Optionsfelder in einer Gruppe ausgewählt wird. Daher ist es normalerweise ratsam, dass eines standardmäßig im checked-Zustand ist. Siehe Ein Optionsfeld 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 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 auf das submit Ereignis einzurichten, das gesendet wird, wenn der Benutzer auf die "Submit"-Taste 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, wie es nie mehr als ein Ergebnis für die contact-Gruppe gibt.

Zusätzliche Attribute

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

checked

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

Anders als andere Browser, behält Firefox standardmäßig den dynamischen Checked-Zustand eines <input> über Seitenladevorgänge hinweg. Verwenden Sie das autocomplete-Attribut, um diese Funktion zu kontrollieren.

value

Das value-Attribut ist eines, das alle <input>s teilen; es erfüllt jedoch einen speziellen Zweck für Inputs des Typs radio: Wenn ein Formular abgeschickt wird, werden nur die Optionsfelder, die aktuell ausgewählt sind, an den Server gesendet und der gemeldete Wert ist der Wert des value-Attributs. Wenn der value nicht spezifiziert ist, 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 teilen. Wenn ein Optionsfeld in einer gleichnamigen Gruppe von Optionsfeldern das required-Attribut hat, muss ein Optionsfeld in dieser Gruppe ausgewählt werden, obwohl es nicht dasjenige sein muss, auf das das Attribut angewendet ist.

Verwendung von Radio-Inputs

Wir haben bereits die Grundlagen der Optionsfelder oben behandelt. Lassen Sie uns nun die anderen häufig verwendeten, optionsfeldbezogenen Funktionen und Techniken betrachten, die Sie kennen sollten.

Ein Optionsfeld standardmäßig auswählen

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.

Bereitstellung einer größeren Trefferfläche für Ihre Optionsfelder

In den obigen Beispielen haben Sie möglicherweise 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 wirklich nützliche Funktion von HTML-Formularlabels, die es den Nutzern erleichtert, die gewünschte Option auszuwählen, insbesondere auf Geräten mit kleinem Bildschirm wie Smartphones.

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

Validierung

Im Fall eines Optionsfelds mit dem 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 gilt. 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 Nutzer auffordern, eine Option auszuwählen.

Styling von Radio-Inputs

Das folgende Beispiel zeigt eine etwas gründlichere Version des Beispiels, das wir im gesamten Artikel gesehen haben, mit etwas zusätzlichem Styling und besseren Semantiken durch die Verwendung von spezialisierten Elementen. 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, das in diesem Beispiel verwendet wird, ist etwas bedeutsamer:

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 appearance-Eigenschaft (mit Präfixen erforderlich, um einige Browser zu unterstützen). Standardmäßig sind Optionsfelder (und Kontrollkästchen) mit den nativen Stilen des Betriebssystems für diese Steuerungen gestaltet. Durch die Angabe von appearance: none können Sie die native Gestaltung vollständig entfernen und Ihre eigenen Stile für sie erstellen. Hier haben wir eine border zusammen mit border-radius und einer transition verwendet, um eine schöne animierende Optionsfeldauswahl zu erstellen. Beachten Sie auch, wie die :checked-Pseudoklasse verwendet wird, um die Stile für das Aussehen des Optionsfelds bei Auswahl zu spezifizieren.

Beachten Sie, dass beim Klicken auf ein Optionsfeld ein schöner, glatter Ausblend-/Einblendeffekt auftritt, wenn die beiden Schaltflächen den Zustand wechseln. Zusätzlich sind der Stil und die Farbgebung der Legende und der Abschickschaltfläche so angepasst, dass sie einen starken Kontrast haben. Dies könnte nicht der Stil sein, den Sie in einer echten Webanwendung möchten, aber es zeigt definitiv die Möglichkeiten.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

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