HTML/Tutorials/Formulare/Radio-Buttons und Checkboxen

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | Formulare(Weitergeleitet von Checkbox-Hack)
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
30min
Schwierigkeitsgrad
mittel
Vorausgesetztes Wissen
Grundkenntnisse in
HTML
CSS


Oft gibt es aber auch mehrere 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.

Radio-Buttons[Bearbeiten]

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.

  • HTML 2.0
  • XHTML 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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.


Radio-Buttons für Zahlungsweise ansehen …
<form> <p>Geben Sie Ihre Zahlungsweise an:</p> <fieldset> <input type="radio" id="mc" name="Zahlmethode" value="Mastercard"> <label for="mc"> Mastercard</label> <input type="radio" id="vi" name="Zahlmethode" value="Visa"> <label for="vi"> Visa</label> <input type="radio" id="ae" name="Zahlmethode" value="AmericanExpress"> <label for="ae"> American Express</label> </fieldset> </form>

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[Bearbeiten]

Eine Checkbox (<input type="checkbox">) ist ein ankreuzbares Kontrollfeld. Der Benutzer kann es auswählen oder die Auswahl entfernen.

  • HTML 2.0
  • XHTML 1.0
  • Chrome
  • IE
  • Firefox
  • Opera
  • Safari

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 Attribut checked, 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]


Checkboxen für Mehrfachauswahl ansehen …
<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[Bearbeiten]

Gestaltung mit CSS[Bearbeiten]

Checkboxen für Mehrfachauswahl ansehen …
<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>
Normalerweise sind Radio-Buttons, Checkboxen und ihre labels Inline-Elemente, d.h. sie werden innerhalb einer Zeile nebeneinander dargestellt. Sie können eine Gruppe durch div-Elemente oder innerhalb einer Liste untereinander platzieren.
In den oberen Beispielen wurde dies durch ein (leeres) Pseudoelement erreicht:
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.

Radio-Buttons verstecken[Bearbeiten]

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.


HTML-Struktur
    <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 Nachbarselektorinput:checked + label das dazugehörende Label grün eingefärbt. Ein evtl. vorher angeklickter Button verliert dann seine Pseudoklassechecked und 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[Bearbeiten]

Ein FlipFlop-Schalter oder toggle-Switch ist ein Software-Feature, das zwischen zwei Zuständen hin- und her schaltet.

HTML-Struktur
<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.
CSS - FlipFlop-Schalter ansehen …
.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: 2em;
  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.
flipFlop-Schalter mit Text ansehen …
.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:

Exkurs: Checkbox-Hack[Bearbeiten]

Der Checkbox-Hack ist ein Trick, bei dem eine Checkbox dazu zweckentfremdet wird, Interaktivität ohne den Einsatz von JavaScript zu erreichen. Dabei bestimmt der Zustand der Checkbox die Formatierung eines nahe gelegenen anderen Elements. Typischerweise ist die Checkbox dabei vollständig durch CSS ausgeblendet und wird durch verbundene label-Elemente kontrolliert.[2]

Hinweis

Der Checkbox-Hack verspricht eine Interaktivität ohne den Einsatz von JavaScript. 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:

-- Matthias Scharwies (Diskussion) 08:36, 2. Jan. 2021 (CET)

"Mehr lesen" mit dem Checkbox-Hack ansehen …
<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;
}
Im Default-Zustand ist der Volltext versteckt. Bei Klick auf das label wird der Haken in der Checkbox gesetzt, sodass die letzteren CSS-Regeln greifen - der Volltext wird angezeigt und der mit before generierte content vor dem label wird von " mehr" zu " weniger".
Beachten Sie, dass die Checkbox im HTML-Code vor den Elementen stehen muss, die sie kontrolliert.
Statt dem Geschwisterselektor wäre für die Kontrolle über das span-Element auch der Nachbarselektor eine denkbare Wahl gewesen.

Hinweis

Das verlinkte Livebeispiel enthält, zusätzlich zum hier gezeigten Beispielcode, einen Bugfix, der für das Funktionieren des Checkbox-Hack unter anderem im Android-Systembrowser 4.x notwendig ist.

Information

Weitere Anwendungen des Checkbox-Hacks finden Sie unter CSS/Tutorials/Menüs und mehr mit dem Checkbox-Hack.


Weblinks[Bearbeiten]

  1. MDN: Checkboxen mit unbestimmbarem Wert
    Mit JavaScript kann man eine Checkbox auf auf inputInstance.indeterminate = true; setzen.
    Eine Checkbox im indeterminate-Status hat in den meisten Browsern eine horizontale Linie in der Box anstatt eines Häkchens.
  2. css-Tricks: Stuff you can do with the “Checkbox Hack”