HTML/Formulare/input/Radio-Buttons und Checkboxen

Aus SELFHTML-Wiki
< HTML‎ | Formulare‎ | input
Wechseln zu: Navigation, Suche

Radio-Buttons und Checkboxen sind Felder, die Sie anwählen können, in die aber kein Text oder anderes eingegeben werden kann.


Radio-Buttons[Bearbeiten]

Radio-Buttons (<input type="radio" ...>) sind eine Gruppe von beschrifteten Knöpfen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radio-Buttons ausgewählt sein.

  • HTML 2.0
  • XHTML 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel 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>

Folgende Attribute sind möglich:

  • name: Jeder Radio-Button sollte einen internen Bezeichnernamen erhalten. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen markieren. Der vergebene Name wird bei CGI-Scripts benötigt, um auf die Daten des Eingabefeldes zugreifen zu können. Bei E-Mail-Formularen taucht der Name als Feldname auf. Und auch bei dem Formularfeldzugriff mit JavaScript ist der Name von Bedeutung.
  • 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.
  • 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: Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Attribut in der Form checked="checked" notieren. Mehr als eine Auswahlmöglichkeit dürfen Sie bei Radio-Buttons nicht vorselektieren.
  • disabled: Mit diesem Attribut deklarieren Sie eine Auswahlmöglichkeit als deaktiviert. Sie wird ausgegraut dargestellt und ist nicht mehr anklickbar.

Vor oder hinter dem <input>-Tag können Sie den Text notieren, der als Beschriftung der jeweiligen Option erscheint. Diese Beschriftung wird in ein Label-Element geschrieben, das mittels des for-Attributes mit der ID der zugehörigen Checkbox verknüpft ist. Man kann dadurch die Checkbox markieren, indem man sie selber anklickt oder das mit ihr verknüpfte Label. Insbesondere bei Checkboxen und Radiobuttons ist dies ein echter Usabilitygewinn.

Checkboxen[Bearbeiten]

Checkboxen (<input type="checkbox">) sind eine Gruppe von ankreuzbaren Kontrollfeldern, bei denen der Anwender keine, eine oder mehrere auswählen kann. Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
Beispiel ansehen …
<form> 
  <h3>Kreuzen Sie die gewünschten Zutaten an:</h3> 
  <fieldset>
    <ul>
      <li> 
        <label>
          <input type="checkbox" name="zutat" value="salami">
          Salami
        </label>
      </li>
      <li> 
        <label>
           <input type="checkbox" name="zutat" value="schinken">
           Schinken
        </label>
      </li>
      <li>  
        <label>
          <input type="checkbox" name="zutat" value="sardellen">
          Sardellen
        </label>
      </li>
    </ul> 
  </fieldset> 
</form>

Folgende Attribute sind möglich:

  • name: Jede Checkbox muss einen internen Bezeichnernamen erhalten. Dieser wird mit dem Attribut name vergeben. Alle Checkboxen, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender keines, eines oder mehrere ankreuzen. Für den Namen gelten die gleichen Bemerkungen wie bei Radio-Buttons.
  • 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.
  • checked: 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>


Beachten Sie: Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie dieses Attribut in der Form checked="checked" notieren.
Empfehlung:

Verwenden Sie label-Elemente
Notieren Sie sie vor oder hinter dem input-Tag Text, der als Beschriftung der jeweiligen Option erscheint. Diese Beschriftung wird in ein label-Element geschrieben, das entweder mittels des for-Attributes mit der ID der zugehörigen Checkbox oder durch den Umstand, dass die Checkbox ein Kindelement des label ist, mit der Checkbox logisch verknüpft ist.

Man kann dadurch die Checkbox markieren, indem man sie selber anklickt oder das mit ihr verknüpfte Label. Insbesondere bei Checkboxen und Radiobuttons ist dies ein echter Usabilitygewinn.

Im Gegensatz zu Radiobuttons 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.


Der 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.[1]

Hinweis

Im Folgenden Beispiel werden (wie für die meisten Varianten des Checkbox-Hacks) einige nicht-triviale CSS-Eigenschaften bzw. Selektoren genutzt:
Beispiel: "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, so dass 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. css-Tricks: Stuff you can do with the “Checkbox Hack”