HTML/Tutorials/Formulare/Radio-Buttons und Checkboxen
Oft gibt es in Formularen aber auch Buttons, die mehrere Möglichkeiten zur Auswahl bieten. Hier würde eine Verwendung von button-Elementen zwingend den Einsatz von JavaScript zur Auswertung erfordern. Eine Verwendung des select-Elements oder von input-Elementen wie Radio-Buttons bzw. Checkboxen ist auch ohne JavaScript oder CSS noch funktionsfähig.
In den Abschnitten Radio-Buttons verstecken und FlipFlop-Schalter erfahren Sie, wie solche Radio-Buttons und Checkboxen mit CSS gestylt werden können. So können Auswahlmenüs und auch Toggle-Switches realisiert werden.
Inhaltsverzeichnis
Radio-Buttons
Radio-Buttons (<input type="radio" ...>) sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Sobald ein Radiobutton markiert wird, wird eine eventuell vorhandene Markierung eines anderen Radiobuttons derselben Gruppe gelöscht.
Folgende Attribute sind möglich:
-
name: Alle Radio-Buttons, die den gleichen internen Bezeichnernamen haben, gehören zu einer Gruppe, d. h. von diesen Buttons kann der Anwender genau einen markieren. -
value: bestimmt einen internen Bezeichnerwert für jeden Radio-Button (value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen. -
disabled: Mit diesem Attribut deklarieren Sie eine Auswahlmöglichkeit als deaktiviert. Sie wird ausgegraut dargestellt und ist nicht mehr anklickbar. -
checked: Wenn Sie eine der Auswahlmöglichkeiten vorselektieren wollen, dann notieren Sie in dem<input>-Tag des entsprechenden Radio-Buttons das alleinstehende Attribut checked, also z. B.:<input type="radio" name="Typ" value="Kassenpatient" checked>Beachten Sie: Mehr als eine Auswahlmöglichkeit dürfen Sie bei Radio-Buttons nicht vorselektieren.
Zu jedem input "type=radio" gehört ein Label-Element, der als Beschriftung der jeweiligen Option erscheint. Es kann vor oder hinter dem Radio-Button stehen und ist mittels des for-Attributes mit der ID der zugehörigen Checkbox verknüpft.
Eine solche Mehrfachauswahl ist für alle zugänglich:
- Mit der Tastatur können Sie die Gruppe mit der Tab-Taste ( ⭾ ) ansteuern und dann mit der Leertaste auswählen. Mit Pfeil rechts ( → ) / unten ( ↓ ) geht es zum nächsten Button, der ausgewählt wird.
- Mit der Maus können Sie die Radio-Buttons, aber auch die dazu gehörigen Beschriftungen anklicken.
Checkboxen
Eine Checkbox (<input type="checkbox">) ist ein ankreuzbares Kontrollfeld. Der Benutzer kann es auswählen oder die Auswahl entfernen.
Folgende Attribute sind möglich:
-
checked: Boolean Wenn Sie eine (oder mehrere) Auswahlmöglichkeiten vorselektieren wollen, dann notieren Sie in dem<input>-Tag der entsprechenden Checkbox das alleinstehende Attributchecked, also z. B.:<input type="checkbox" name="Kenntnisse_in" value="HTML" checked> -
readonly: Boolean ; wenn vorhanden, wird das Erscheinungsbild abgeändert, so dass angezeigt wird, dass der Wert nicht geändert werden kann. -
value: bestimmt einen internen Bezeichnerwert für jede Checkbox (value = Wert). Wenn der Anwender das Formular abschickt, wird der Bezeichnerwert des oder der markierten Buttons übertragen.
Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen. Es lassen sich auch Gruppen von Checkboxen mit gleichen Namen (name) erstellen, was technisch gesehen nur für die Übertragung wichtig ist, da sich Checkboxen auch in einer Gruppe unabhängig voneinander auswählen lassen.
Checkboxen in HTML kennen nur die Zustände ausgewählt und nicht ausgewählt. Der aus der grafischen Oberfläche von Betriebssystemen bekannte dritte Zustand mit der Bedeutung unbestimmt (engl. indeterminate), der oft gräulich oder mit einem Quadrat statt einem Haken dargestellt wird, kann nur mit JavaScript gesetzt werden.[1]
<fieldset>
<legend>Kreuzen Sie die gewünschten Zutaten an:</legend>
<input type="checkbox" name="zutat" value="kaese" id="check1" checked>
<label for="check1">Käse</label>
<input type="checkbox" name="zutat" value="schinken" id="check2">
<label for="check2">Schinken</label>
<input type="checkbox" name="zutat" value="salami" id="check3">
<label for="check3">Salami</label>
<input type="checkbox" name="zutat" value="oliven" id="check4">
<label for="check4">Oliven</label>
<input type="checkbox" name="zutat" value="paprika" id="check5">
<label for="check5">Paprika</label>
<input type="checkbox" name="zutat" value="pilze" id="check6">
<label for="check6">Pilze</label>
</fieldset>
Zu jedem input "type="checkbox" gehört ein Label-Element, der als Beschriftung der jeweiligen Option erscheint. Es kann vor oder hinter dem Ankreuzfeld stehen und ist mittels des for-Attributes mit der ID der zugehörigen Checkbox verknüpft.
Eine solche Auswahl ist für alle zugänglich:
- Mit der Tastatur können Sie die Gruppe mit der Tab-Taste ( ⭾ ) ansteuern und dann das Ankreuzfeld mit der Leertaste auswählen. Mit Pfeil rechts ( → ) / unten ( ↓ ) geht es zur nächsten Checkbox.
- Mit der Maus können Sie die Checkboxen, aber auch die dazu gehörigen Beschriftungen anklicken.
Im Gegensatz zu Radio-Buttons müssen Checkboxen keine identische Namen haben, um zu funktionieren. Es ist aber hinsichtlich des auswertenden Skripts eventuell sehr sinnvoll, identische Namen zu verwenden, weil das Skript dann automatisch ein Array anlegen kann. PHP legt das Array automatisch an, wenn der Name auf "[]" endet.
Anwendungsbeispiele
Gestaltung mit CSS
<fieldset>
<legend>Kreuzen Sie die gewünschten Zutaten an:</legend>
<input type="checkbox" name="zutat" value="kaese" id="check1" checked>
<label for="check1">Käse</label>
<input type="checkbox" name="zutat" value="schinken" id="check2">
<label for="check2">Schinken</label>
label::after {
content: "";
display: block;
}
input:checked {
outline: 2px solid green;
}
input:checked + label {
color: green;
font-weight: bold;
}
Das oben erwähnte checked-Attribut kann mit dem :checked-Selektor ausgewählt und dann formatiert werden. In diesem Beispiel wird der Rand des Kästchen anders gefärbt. Dies geschieht nicht über die border-Eigenschaft sondern mit outline.
Der gleiche Selektor kann in Verbindung mit dem Nachbarselektor input:checked + label das dazugehörende Label formatieren.
accent-color
Die Eigenschaft accent-color ermöglicht die Wahl einer Akzentfarbe, die Elemente wie input type="checkbox" oder type="radio" einfärbt. [2]
body {
--brand: lime;
accent-color: var(--brand);
}
fieldset {
border-color: var(--brand);
}
Radio-Buttons verstecken
Wenn Sie den Benutzern Ihrer Webseite eine Auswahl aus mehreren Möglichkeiten anbieten, ist ein Menü aus Radio-Buttons semantisch die beste Wahl.
Häufig soll dies aber an das Seitendesign angepasst werden. Im folgenden Beispiel werden die Radio-Buttons versteckt – die Funktionalität bleibt als Standardverhalten auch ohne JavaScript erhalten.
<div class="toggle-buttons">
<input type="radio" id="b1" name="group-b"/>
<label for="b1">Pizza</label>
<input type="radio" id="b2" name="group-b"/>
<label for="b2">Pasta</label>
<input type="radio" id="b3" name="group-b" />
<label for="b3">Pommes</label>
</div>
Unser Menü besteht aus input-Feldern vom type="radio". Über den gemeinsamen name ist festgelegt, dass nur eine Auswahl erlaubt wird.
Die folgenden label-Elemente werden über das for-Attribut mit der id des zugehörenden input-Elements verbunden. Damit können Sie den Radio-Button auch mit einem Klick auf die Erklärungen auswählen.
.toggle-buttons input[type="radio"] {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle-buttons label {
border: 1px solid #333;
border-radius: 0.5em;
padding: 0.5em;
}
.toggle-buttons input:checked + label {
background: #ebf5d7;
color: #5a9900;
box-shadow: none;
}
input:hover + label,
input:focus + label {
background: #ffebe6;
}
Über den Attributsselektor input[type="radio"] werden alle Radio-Buttons mit Image Replacement visuell so ausgeblendet, dass ihre Funktionalität auch für Screenreader gewährleistet bleibt.
Labels erhalten einen (abgerundeten) Rand, der durch ein padding von 0.5em vergrößert wird.
Dabei müssen sowohl die Zustände, wie auch das Verhalten mit CSS gekennzeichnet werden:
- Bei der Auswahl eines Radio-Buttons wird über den Nachbarselektor
input:checked + labeldas dazugehörende Label grün eingefärbt. Ein evtl. vorher angeklickter Button verliert dann seine Pseudoklassecheckedund fällt wieder in seinen Urzustand zurück. - Wenn man einen (unsichtbaren) Radio-Button mit der Tastatur ansteuert, wird das Label entsprechend (
input:focus + label) mit einem roten Hintergrund gekennzeichnet.
Es gibt im SELF-Wiki einige Anwendungsbeispiele, die dieses Prinzip verwenden:
- Im Mathe-Quiz kann so der gewünschte Operator ausgewählt werden.
- Im Lotto-Tutorial wird so ein Lotto-Auswahlfeld nachgebaut.
- Das Multiple-Choice-Quiz ermöglicht eine Auswahl zwischen möglichen Antworten.
FlipFlop-Schalter
Ein FlipFlop-Schalter oder toggle-Switch ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.
<label>
An-/Aus-Schalter
<input type="checkbox">
<span></span>
</label>
Für das Beispiel verwenden wir ein input-Feld vom type="checkbox", das zusammen mit einem span-Element in einem label-Element verschachtelt ist.
.toggle label {
position: relative;
display: inline-block;
width: 10em;
height: 3.5em;
}
.toggle input {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.toggle .slider { /* Grundfläche */
position: absolute;
cursor: pointer;
top: 1.5em;
left: 3em;
width: 4em;
height: 2em;
background-color: #c32e04;
border-radius: 1em;
transition: all .3s ease-in-out;
}
.toggle .slider::before { /* verschiebbarer Button */
position: absolute;
content: "";
height: 1.6em;
width: 1.6em;
left: .2em;
bottom: .2em;
background-color: white;
border-radius: 50%;
transition: all .3s ease-in-out;
}
Das Label wird zum Ausgangspunkt des Schalters, an dem absolut ausgerichtete Elemente orientiert sind.
Die Checkbox wird ausgeblendet. Allerdings ist sie trotzdem funktionsfähig und ihr Zustand kann mit einem Klick auf das Label aktiviert werden.
Die Grundfläche des Sliders span class="slider" wird absolut unterhalb der Beschreibung positioniert.
Mit .slider::before{} wird nun ein Pseudoelement absolut über die Grundfläche positioniert. Es erhält die Form eines kreisförmigen, weißen Buttons.
.toggle input:checked + .slider {
background-color: #5a9900;
}
.toggle input:checked + .slider::before {
transform: translateX(1.9em);
}
Sobald der FlipFlop-Schalter angeklickt wird, ändert sich der Zustand der (nicht sichtbaren) Checkbox. Über die Pseudoklasse checked und den Nachbarselektor wird nun die Hintergrundfarbe der Grundfläche und die Position des weißen Buttons verändert.
.text .slider::before { /* Text vor dem FlipFlop-Schalter */
position: absolute;
content: "AUS";
color: #c32e04;
font-weight: bold;
height: 1.6em;
left: -2.5em;
bottom: .2em;
}
.text input:checked + .slider::after { /* Text hinter dem FlipFlop-Schalter */
position: absolute;
content: "AN";
color: #5a9900;
left: 4.5em;
}
Das untere Beispiel erhält ein weiteres Pseudoelement. Mit der content-Eigenschaft erhält es eine Beschreibung des Zustands in der passenden Farbe.
Sobald der Schaltzustand geändert wird, wird ein neuer Text an anderer Stelle und in einer anderen Farbe eingeblendet.
Siehe auch:
- jsfiddle.net/tovic/ve8mU/light sehr elegante Kippschalter von Taufik Nurrohman
- Accessibility first: toggle switches (dev.to)
Exkurs: Checkbox-Hack
Achtung!
Das dabei entstehende Stylesheet ist recht komplex und die Seite ist nicht barrierefrei. Zudem verstößt der Einsatz gegen die separation of concerns, die Trennung von Inhalt, Präsentation und Verhalten.
Das folgende Beispiel sollte daher als proof of concept angesehen werden. Es werden (wie für die meisten Varianten des Checkbox-Hacks) einige nicht-triviale CSS-Eigenschaften bzw. Selektoren genutzt:
- Der Klassenselektor
- Der Geschwisterkombinator ~
- Das Pseudoelement before
- Die dynamische Pseudoklasse checked
-- Matthias Scharwies (Diskussion) 08:36, 2. Jan. 2021 (CET)
<h2>Lesbarkeit</h2>
<p>Lieber Kunde und Leser, falls Sie keine Probleme haben, [...weiterer Blindtext...] par excellence.<br>
<input type="checkbox" class="hackbox mehr_lesen" id="mehr_lesen_lesbarkeit">
<span class="volltext">Er hat diesen Copyblock weder [...weiterer Blindtext...] Arbeit haben.<br></span>
<label class="mehr_lesen" for="mehr_lesen_lesbarkeit"> lesen...</label>
</p>
/* allgemeines */
input.hackbox {
display:none;
}
/* default-Zustand */
span.volltext {
display:none;
}
label.mehr_lesen {
color:#0091D2;
}
label.mehr_lesen::before {
content:" mehr";
color:#0091D2;
}
/* bei gesetztem Haken */
input.mehr_lesen:checked ~ span.volltext {
display:inline;
}
input.mehr_lesen:checked ~ label.mehr_lesen::before {
content:" weniger";
color:#0091D2;
}
Weblinks
- ↑ MDN: Checkboxen mit unbestimmbarem Wert
Mit JavaScript kann man eine Checkbox auf aufinputInstance.indeterminate = true;setzen.
Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box anstatt eines Häkchens. - ↑ smashing magazine: Simplifying Form Styles With accent-color von Michelle Barker, 23.09.2021
- ↑ css-Tricks: Stuff you can do with the “Checkbox Hack”
- Inclusively Hiding & Styling Checkboxes and Radio Buttons 16 Jun, 2020 (Sara Soueidan)
In den oberen Beispielen wurde dies durch ein (leeres) Pseudoelement erreicht: