Gruppen aus Kontrollkästchen und Optionsfeldern
Lassen Sie Benutzer eine oder mehrere Optionen aus einer Gruppe auswählen
Gruppen aus Kontrollkästchen und Optionsfeldern ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Checkboxen
Mit Checkboxen können Benutzer keine, eine oder mehrere Optionen auswählen:
<label>
<input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>
<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>Übermittlung von Checkboxen
Checkboxen werden nur übermittelt, wenn sie aktiviert sind:
<form>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="coding"> Coding<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->Checkbox-Gruppen mit fieldset
Gruppieren Sie zusammengehörige Checkboxen mit fieldset + legend:
<fieldset>
<legend>Select your interests</legend>
<label><input type="checkbox" name="interest" value="html"> HTML</label>
<label><input type="checkbox" name="interest" value="css"> CSS</label>
<label><input type="checkbox" name="interest" value="js"> JavaScript</label>
<label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>Optionsfelder
Mit Optionsfeldern können Benutzer genau eine Option aus einer Gruppe auswählen:
<fieldset>
<legend>Preferred plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->checked-Attribut
Wählen Sie ein Optionsfeld oder eine Checkbox mit dem Attribut checked vorab aus:
<fieldset>
<legend>Skill level</legend>
<label><input type="radio" name="level" value="beginner" checked> Beginner</label>
<label><input type="radio" name="level" value="intermediate"> Intermediate</label>
<label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>Checkboxen und Optionsfelder gestalten
Benutzerdefiniert gestaltete Checkboxen mithilfe des Label-Tricks:
<label class="custom-check">
<input type="checkbox" name="agree">
<span class="checkmark"></span>
I agree
</label>
/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
width: 1.25rem; height: 1.25rem;
border: 2px solid #ddd; border-radius: 3px;
display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }indeterminate-Zustand
Checkboxen können sich in einem Zwischenzustand befinden, also weder aktiviert noch deaktiviert sein:
<input type="checkbox" id="select-all">
<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>radio ohne Vorauswahl
Manchmal ist es besser, ein Optionsfeld nicht vorab auszuwählen:
- Eine Vorauswahl vermittelt, dass diese Option empfohlen wird
- Lassen Sie erforderliche Auswahlen ohne eindeutigen Standardwert, etwa Geschlecht oder Tarif, unausgewählt
- Fügen Sie
requiredhinzu, damit Benutzer eine ausdrückliche Auswahl treffen müssen
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="m" required> Male</label>
<label><input type="radio" name="gender" value="f" required> Female</label>
<label><input type="radio" name="gender" value="nb" required> Non-binary</label>
<label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>Checkbox: checked im Vergleich zu value
Zwei wichtige Aspekte bei der Übermittlung von Checkboxen:
<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->
<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked); // true or false
console.log(cb.value); // 'yes' (always, even when unchecked)Tastaturnavigation in Optionsfeldgruppen
Tastaturverhalten für Optionsfeldgruppen:
- Die Tabulatortaste verschiebt den Fokus in der Gruppe auf das ausgewählte oder erste Optionsfeld
- Mit den Pfeiltasten (↑/↓ oder ←/→) wechseln Sie zwischen den Optionen
- Die Tabulatortaste verschiebt den Fokus aus der Gruppe zum nächsten fokussierbaren Element
Muster zum Auswählen aller Optionen
Muster zum Aus- und Abwählen aller Checkboxen:
<label>
<input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
<label><input type="checkbox" class="item" value="1"> Item 1</label>
<label><input type="checkbox" class="item" value="2"> Item 2</label>
<label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>Kurze Überprüfung
Welche Regel für das name-Attribut sorgt dafür, dass Optionsfelder derselben Gruppe angehören?
Zusammenfassung: Checkboxen und Optionsfelder
Grundlagen zu Checkboxen und Optionsfeldern:
- Checkbox – mehrere Optionen auswählen; wird nur im aktivierten Zustand übermittelt
- Optionsfeld – genau eine Option auswählen; Gruppierung über
name - Beide verwenden das Attribut
checkedzur Vorauswahl - Umschließen Sie sie mit
<fieldset>+<legend> - Mit den Pfeiltasten navigieren Sie innerhalb einer Optionsfeldgruppe
Häufig gestellte Fragen
Ist die Lektion „Gruppen aus Kontrollkästchen und Optionsfeldern“ kostenlos?
Ja — der vollständige Text von „Gruppen aus Kontrollkästchen und Optionsfeldern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Gruppen aus Kontrollkästchen und Optionsfeldern“?
Lassen Sie Benutzer eine oder mehrere Optionen aus einer Gruppe auswählen Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um HTML Academy zu starten?
Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Gruppen aus Kontrollkästchen und Optionsfeldern“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?
Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Select und option: Dropdown-Menüs
- Textarea für mehrzeilige Eingaben
- Gruppen aus Kontrollkästchen und Optionsfeldern
- Datalist für die automatische Vervollständigung