HTML-Radiobuttons: name-Gruppen, checked und required

HTML <input type="radio"> erstellt Radiobuttons, um ein Element aus verwandten Optionen auszuwählen. Buttons mit demselben Namen im selben Formular gehören zu einer Gruppe; geben Sie jeder Option einen anderen Wert. Nur der ausgewählte Button-Name und Wert werden übermittelt.

Unterscheiden Sie den Gruppennamen von der id jedes Buttons

Schaltflächen in einer Gruppe teilen sich einen Namen, aber jede ID, die verwendet wird, um ein Label zuzuordnen, muss eindeutig sein. Wenn eine andere Schaltfläche mit demselben Namen ausgewählt wird, wird die vorherige Auswahl gelöscht. Verwenden Sie unterschiedliche Namen für unabhängige Fragen. Fieldset und Legend stellen eine Gruppe und ihre Frage bereit, aber separate Fieldsets allein teilen Radio-Buttons mit demselben Namen nicht in verschiedene Auswahlgruppen auf.

Der Besitz eines Formulars beeinflusst ebenfalls die Gruppierung: Schaltflächen mit demselben Namen in verschiedenen Formularen bilden nicht unbedingt eine Gruppe. Das folgende Beispiel trennt Obst- und Sportgruppen innerhalb desselben Formulars.

Vollständiges Beispiel: Werte für zwei Fragen prüfen

Speichern Sie das folgende Dokument als radio-demo.html und öffnen Sie es in einem Browser. Eine Obstwahl ist erforderlich, während Baseball die Standardsportart ist. Das Beispiel verhindert die Übermittlung und zeigt die aktuellen Werte auf der Seite an, sodass kein Server-Handler erforderlich ist.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Radiogruppen und übermittelte Werte</title>
</head>
<body>
  <h1>Auswahl üben</h1>
  <form id="choices">
    <fieldset>
      <legend>Obst (erforderlich)</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">Apfel</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">Banane</label>
    </fieldset>
    <fieldset>
      <legend>Sport</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">Fußball</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">Baseball</label>
    </fieldset>
    <button type="submit">Werte anzeigen</button>
    <button type="reset">Zurücksetzen</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('choices');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Anfangs ist kein Obst ausgewählt, und Baseball ist ausgewählt. Drücken Sie den Senden-Button: Die erforderliche Obstwahl verhindert die Übermittlung.
2. Wählen Sie Apfel und senden Sie das Formular. Die Ausgabe enthält fruit=apple und sport=baseball. Übermittelt wird der Wert baseball, nicht die sichtbare Beschriftung.
3. Wählen Sie Banane, um Apfel zu löschen. Wählen Sie Fußball, um Baseball zu löschen; die Obstwahl bleibt unverändert.
4. Zurücksetzen stellt keine Obstauswahl und die Standard Baseball-Auswahl wieder her. Zurücksetzen stellt die ursprünglichen Kontrollzustände wieder her, anstatt jede Auswahl zu löschen.

checked · required

checked ist ein Boolean-Attribut für die anfängliche Auswahl. checked="false" hat das Attribut immer noch vorhanden und ist kein korrekter Weg, false auszudrücken. Lassen Sie es weg für eine anfänglich nicht ausgewählte Option. Lesen oder ändern Sie den aktuellen Zustand mit der JavaScript checked-Eigenschaft.

Wenn irgendeine Schaltfläche in einer Gruppe required hat, muss eine Schaltfläche in dieser Gruppe ausgewählt sein. Die ausgewählte Schaltfläche selbst muss nicht required haben. Beide Obstoptionen haben es hier, um die Anforderung klar zu machen.

Eine Gruppe ohne Auswahl wird nicht übermittelt. Fehlt bei einer ausgewählten Option value, wird standardmäßig die Zeichenfolge on gesendet; vergeben Sie daher eindeutige Werte für die Optionen. Buttons mit disabled können nicht bedient werden und werden nicht übermittelt. Prüfen Sie auch bei Browservalidierung die erlaubten Werte erneut auf dem Server.

Eine Auswahl löschen und die Tastatur verwenden

Das Klicken auf eine bereits ausgewählte Optionsschaltfläche löscht diese nicht wie ein Kontrollkästchen. Wenn Benutzer „Keine“ auswählen müssen, gestalten Sie dies als separate Option. Verwenden Sie Kontrollkästchen für Fragen, bei denen mehrere Elemente unabhängig voneinander umgeschaltet werden können.

Verknüpfen Sie Beschriftungen, sodass das Klicken auf deren Text die Optionen auswählt. Behalten Sie die native Tastatursteuerung bei: Verwenden Sie Tab, um die Gruppe zu erreichen, und dann die Pfeiltasten, um zu navigieren und auszuwählen. Das genaue Fokusverhalten kann je nach Browser unterschiedlich sein. Die MDN Radio-Input-Referenz erklärt Attribute und Übermittlungsregeln.