HTML Radio Button verwenden

Geschlecht, Zahlungsart, Versandoption – wenn nur EINE Auswahl möglich ist, brauchst du HTML Radio Buttons! Sie funktionieren wie bei alten Autoradios: Drückst du einen, springt der andere raus. In diesem Tutorial lernst du alles darüber.

Einführung in das HTML Radio Button Tutorial

Was sind Radio Buttons

Radio Buttons ermöglichen Einfachauswahl: Aus einer Gruppe kann nur EINE Option gewählt werden. Wählst du eine andere, wird die erste automatisch abgewählt.

Der wichtige Unterschied zu Checkboxen:

• Checkbox: Mehrfachauswahl möglich
• Radio Button: Nur eine Option pro Gruppe

Typische Anwendungsfälle

Du findest Radio Buttons bei:

• Geschlechtsauswahl (m/w/d)
• Zahlungsmethoden (Kreditkarte, PayPal, Überweisung)
• Versandoptionen (Standard, Express)
• Umfragen (Ja/Nein/Weiß nicht)
• Größen (S, M, L, XL)

Was du in diesem Tutorial lernst

Nach diesem Tutorial kannst du:

• Radio Buttons erstellen und gruppieren
• Vorauswahl setzen
• Korrekte Values definieren
• Barrierefreie Radio Buttons bauen

Voraussetzungen

Benötigte HTML-Kenntnisse

Du solltest HTML-Formulare verstehen. Falls nicht, hol das kurz nach!

Entwicklungsumgebung

Texteditor und Browser – mehr brauchst du nicht.

Schritt-für-Schritt-Anleitung

Grundlegende Radio Button Syntax

<input type="radio" id="option1" name="choice" value="option1">
<label for="option1">Option 1</label>

Die wichtigsten Attribute:

• type="radio": Macht's zum Radio Button
• name: Gruppiert die Buttons (gleicher Name = eine Gruppe)
• value: Wert, der übertragen wird
• id + for: Verbindet Label mit Button

name-Attribut für Gruppierung

Das ist der Schlüssel! Alle Radio Buttons mit gleichem name gehören zu einer Gruppe:

<input type="radio" id="klein" name="groesse" value="S">
<label for="klein">Klein</label>

<input type="radio" id="mittel" name="groesse" value="M">
<label for="mittel">Mittel</label>

<input type="radio" id="gross" name="groesse" value="L">
<label for="gross">Groß</label>

Alle drei haben name="groesse" → nur einer gleichzeitig wählbar!

Vorauswahl mit checked

<input type="radio" id="woechentlich" name="newsletter" value="weekly" checked>
<label for="woechentlich">Wöchentlich (empfohlen)</label>

checked markiert die Standardauswahl. Pro Gruppe nur EINEN Button vorauswählen!

Code-Beispiele zu HTML Radio Button

Zufriedenheitsumfrage

<form>
    <fieldset>
        <legend>Wie zufrieden bist du mit unserem Service?</legend>
        
        <input type="radio" id="sehr-zufrieden" name="zufriedenheit" value="5">
        <label for="sehr-zufrieden">Sehr zufrieden</label><br>
        
        <input type="radio" id="zufrieden" name="zufriedenheit" value="4">
        <label for="zufrieden">Zufrieden</label><br>
        
        <input type="radio" id="neutral" name="zufriedenheit" value="3">
        <label for="neutral">Neutral</label><br>
        
        <input type="radio" id="unzufrieden" name="zufriedenheit" value="2">
        <label for="unzufrieden">Unzufrieden</label>
    </fieldset>
</form>

<fieldset> + <legend> gruppieren visuell und helfen bei Barrierefreiheit!

Versandoptionen

<fieldset>
    <legend>Versandart wählen</legend>
    
    <input type="radio" id="standard" name="versand" value="0" checked>
    <label for="standard">Standard (kostenlos, 3-5 Tage)</label><br>
    
    <input type="radio" id="express" name="versand" value="4.99">
    <label for="express">Express (4,99€, 1-2 Tage)</label><br>
    
    <input type="radio" id="overnight" name="versand" value="9.99">
    <label for="overnight">Overnight (9,99€, nächster Tag)</label>
</fieldset>

Numerische values erleichtern die Preisberechnung!

Häufige Fehler & Troubleshooting

Fehler 1: Verschiedene name-Attribute

FALSCH:
<input type="radio" name="option1">
<input type="radio" name="option2">
→ Beide gleichzeitig wählbar!

RICHTIG:
<input type="radio" name="choice">
<input type="radio" name="choice">
→ Nur einer wählbar!

Fehler 2: Kein value-Attribut

Ohne value wird "on" übertragen. Das ist nicht hilfreich!

Fehler 3: Kein Label

Ohne Label muss man das winzige Radio klicken. Mit Label reicht ein Klick auf den Text!

HTML Radio Button Best Practices & Tipps

Semantisch korrekte Struktur

• <fieldset> + <legend> für Gruppierung
• Immer <label> mit for-Attribut
• Aussagekräftige value-Werte

Barrierefreiheit

Screenreader erkennen <fieldset>/<legend> als zusammengehörige Gruppe. Labels sind PFLICHT!

Wann Radio vs. Select?

• 2-5 Optionen: Radio Buttons (alle sichtbar)
• 6+ Optionen: Select Dropdown (platzsparend)

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt Radio Buttons:

• <input type="radio"> – die Grundstruktur
• name für Gruppierung (gleiches name = eine Gruppe)
• value für den übertragenen Wert
• checked für Vorauswahl

Radio Buttons sind perfekt, wenn nur EINE Option möglich ist!

Bereit für mehr? Lerne als Nächstes die verschiedenen HTML Button Typen kennen!