Radio-Buttons
Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 41 von 60.
In HTML werden Optionsfelder verwendet, um eine Gruppe sich gegenseitig ausschließender Optionen zu erstellen, aus der der Benutzer nur eine Option auswählen kann. Optionsfelder werden mithilfe des Tags <input> erstellt, wobei das Attribut type auf "radio" gesetzt wird.
Hier ist die grundlegende Syntax zum Erstellen eines Optionsfelds in HTML:
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label><input>: Das Tag, das das Eingabefeld definiert.type="radio": Ein Attribut, das den Eingabetyp als Optionsfeld festlegt.id: Ein Attribut, das dem Optionsfeld eine eindeutige Kennung gibt.
name: Ein Attribut, das Optionsfelder zusammenfasst. Alle Optionsfelder mit demselben Namen gehören zur selben Gruppe, und jeweils nur eine Option innerhalb einer Gruppe kann ausgewählt werden.
value: Ein Attribut, das den mit dem Optionsfeld verbundenen Wert angibt. Dieser Wert wird an den Server gesendet, wenn das Formular übermittelt wird.
<label>: Ein Tag, das eine anklickbare Beschriftung für den Radiobutton bereitstellt. Dasfor-Attribut des Labels sollte mit demid-Attribut des Radiobuttons übereinstimmen.
Hier ist ein Beispiel dafür, wie du eine Gruppe von Optionsfeldern erstellst:
<form>
<input type="radio" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label>
<br>
<input type="radio" id="option2" name="mygroup" value="option2">
<label for="option2">Option 2</label>
<br>
<input type="radio" id="option3" name="mygroup" value="option3">
<label for="option3">Option 3</label>
<br>
</form>In diesem Beispiel haben wir ein Formular mit drei Optionsfeldern, die alle derselben Gruppe angehören, weil sie dasselbe name-Attribut ("mygroup") verwenden. Jedes Optionsfeld hat eine eindeutige id und einen eindeutigen value sowie ein zugehöriges Label. Wenn der Benutzer eine dieser Optionen auswählt und das Formular absendet, wird der Wert des ausgewählten Optionsfelds an den Server gesendet.
Aufgabe
EinfachErstelle ein HTML-Dokument, das ein Formular mit einer Gruppe von Optionsfeldern enthält. Das Formular sollte die folgenden Elemente enthalten:
- Eine Gruppe aus drei Optionsfeldern mit dem Namen "color".
- Das erste Optionsfeld sollte die ID "red", den Wert "red" und eine Beschriftung mit dem Text „Rot“ haben.
- Das zweite Optionsfeld sollte die ID "green", den Wert "green" und eine Beschriftung mit dem Text „Grün“ haben.
- Das dritte Optionsfeld sollte die ID "blue", den Wert "blue" und eine Beschriftung mit dem Text „Blau“ haben.
- Füge nach jeder Beschriftung ein
<br>-Tag ein, um einen Zeilenumbruch zu erzeugen.
Probier es selbst
<!DOCTYPE html>
<html>
<body>
<!-- Hier Code schreiben -->
</body>
</html>Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.
Alle Lektionen in Grundlagen
2Text und Formatierung
ÜberschriftenAbsätzeZeilenumbrücheFetter und kursiver TextNochmals fett und kursivWiederholung – Formatierung8Formulare und Eingaben Teil 1
Formular-GrundlagenTexteingabenInput-AttributePasswortfeldLabels für EingabenZusammenfassung – Einfaches Formular11Event-Registrierungsseite
ProjektübersichtHeader-Bereich6Seitenlayout
Bereiche (Divisions)Inline-SpansSemantische TagsSections und ArticlesZusammenfassung – Layout9Formulare und Eingaben Teil 2
Radio-ButtonsCheckboxenDropdownsButtonsButtons in FormularenWiederholung - Formulare #1Wiederholung - Formulare #212Abschlussherausforderungen
Einfache ProfilkarteEvent-EinladungskarteEinfache ArtikelseiteLieblingsbücher-ListeÜbe selbstständig: Web-Playground