Welche Auswirkungen hat ein fehlendes oder unterschiedliches "name"-Attribut auf die Gruppierung von Radio-Buttons?

Melden

Das name-Attribut ist bei Radio-Buttons das entscheidende Element, um eine logische Gruppe zu bilden. Wenn dieses Attribut fehlt oder bei zusammengehörigen Buttons unterschiedlich ist, hat das weitreichende Auswirkungen auf die Funktionalität, die Datenübertragung und die Barrierefreiheit.

Hier sind die Auswirkungen im Detail:

1. Verlust der Exklusivität (Gegenseitiges Ausschließen)

Das Hauptmerkmal von Radio-Buttons ist, dass man aus einer Liste von Optionen nur eine einzige auswählen kann. Sobald man eine Option anklickt, wird die vorherige Auswahl automatisch aufgehoben.

  • Unterschiedliche Namen: Jeder Radio-Button wird als eigenständiges Element betrachtet. Man kann mehrere (oder alle) Radio-Buttons gleichzeitig auswählen, wie bei Checkboxen.
  • Fehlendes Namen: Auch hier weiß der Browser nicht, dass die Buttons zusammengehören. Die exklusive Auswahl funktioniert nicht.

2. Probleme bei der Datenübermittlung (Form-Submit)

Wenn ein Formular an einen Server (z. B. via PHP oder Node.js) gesendet wird, dient das name-Attribut als "Schlüssel" (Key) und das value-Attribut als "Wert".

  • Unterschiedliche Namen: Der Server erhält für jeden ausgewählten Radio-Button einen eigenen Eintrag (z.B. farbe_rot=on, farbe_blau=on). Das entspricht meist nicht der gewünschten Logik, bei der man nur einen Wert für das Feld "Farbe" erwartet.
  • Fehlende Namen: Das ist das kritischste Problem. Elemente ohne name-Attribut werden beim Absenden des Formulars komplett ignoriert. Die Auswahl des Nutzers kommt niemals beim Server an.

3. Einschränkungen bei der Barrierefreiheit (Accessibility)

Screenreader nutzen das name-Attribut, um Radio-Buttons als Gruppe zu identifizieren.

  • Ist der Name identisch, erkennt der Screenreader: „Radio-Button 1 von 3“.
  • Fehlt der Name oder ist er unterschiedlich, wird jeder Button als einzelnes, isoliertes Element vorgelesen. Der Nutzer versteht den Kontext nicht mehr (z. B. dass er sich zwischen verschiedenen Optionen entscheiden muss).

4. Steuerung über die Tastatur

Bei korrekt gruppierten Radio-Buttons (gleicher Name) kann der Nutzer:

  1. Mit der Tab-Taste in die Gruppe springen.
  2. Mit den Pfeiltasten zwischen den Optionen wechseln.
  • Haben die Buttons unterschiedliche oder keine Namen, muss der Nutzer jeden einzelnen Button mit der Tab-Taste anspringen. Die intuitive Navigation mit den Pfeiltasten innerhalb der Gruppe funktioniert nicht.

Zusammenfassung: Ein Beispiel

Korrekt (Gleicher Name)

<input type="radio" name="geschlecht" value="m"> Männlich
<input type="radio" name="geschlecht" value="w"> Weiblich
<!-- Effekt: Nur eine Auswahl möglich. Server erhält: geschlecht=m -->

Falsch (Unterschiedliche Namen)

<input type="radio" name="auswahl1" value="m"> Männlich
<input type="radio" name="auswahl2" value="w"> Weiblich
<!-- Effekt: Beides gleichzeitig auswählbar. Server erhält: auswahl1=m UND auswahl2=w -->

Falsch (Kein Name)

<input type="radio" value="m"> Männlich
<input type="radio" value="w"> Weiblich
<!-- Effekt: Beides auswählbar. Server erhält: NICHTS. -->

Fazit: Ohne ein identisches name-Attribut verhalten sich Radio-Buttons wie (schlecht funktionierende) Checkboxen und sind für Formulare, die Daten verarbeiten sollen, unbrauchbar.