CSS, HTML & Javascript mit {stil}

input type checkbox / type radio – Checkbox und Radiobutton

input type=radio und type=checkbox (Radiobuttons und Checkboxen) sind Formularelemente, mit denen der Benutzer eine Auswahl unter Variationen oder Optionen trifft. type=checkbox reicht vom einfachen ja-nein-Abfragen wie MITMACHEN bis zur Auswahl mehrerer Optionen. Mit type=radio trifft der Benutzer genau eine Option.

input type radio und type checkbox (auch Radio Button und Checkbox)

type checkbox

input type="checkbox" erzeugt eine Schaltfläche für einfache Abfragen wie „Rückruf erwünscht" oder „Kopie an meine Mailbox". Wird die Schaltfläche aktiviert, erscheint ein Kennzeichen in der Box.

<input type="checkbox" name="spind" value="" checked>
            ^                     ^                ^ 
            |                     |                + --- Angezeigter Wert
            |                     |
            |                     + --- identifiziert das Feld 
            |                           in der Anwendung
            |
            + --- Art des Eingabefelds, 
                  z.B. Checkbox oder Radiobutton

Das Attribut name identifiziert das Eingabefeld in der Anwendung (meist bei einer PHP-Anwendung auf dem Server). value ist leer, aber kann z.B. vorhandene Daten aus der Anwendung zeigen. Das Formular überträgt den Wert des value- und des name-Attributs – aber nur, wenn die Checkbox vom Benutzer markiert wurde.

<input type="checkbox" name="cc" checked value=""> Kopie an meine Mailbox
<input type="checkbox" name="tel" value=""> Rückruf

  • checked="checked" oder einfach checked führt eine Voreinstellung der Checkbox durch.
  • Wenn die Checkbox aktiviert wurde, wird der Wert value bei der Übermittlung des Formulars an die Anwendung geschickt.
  • Der Wert einer inaktiven Checkbox wird nicht gespeichert oder übermittelt.

Größe und Farbe von Checkboxen mit CSS ändern.

type radio

Radiobuttons präsentieren dem Benutzer eine Liste, in der er nur eine Wahl treffen kann – z.B. die Farbe eines T-Shirts aus fünf Farben. Der Browser erzeugt dazu runde Schalter mit weißer Mitte. Der aktive Radiobutton zeigt einen schwarzer Punkt in der Mitte.

Auch Größe und Farbe von input type="radio"-Elementen können mit CSS geändert werden.

<input type="radio" checked name="color" value="rot"> Rot
<input type="radio" name="color" value="grün"> Grün
  • checked="checked" oder einfach checked führt eine Voreinstellung der Radiobutton-Liste durch.
  • Eine zusammengehörende Gruppe von Radiobuttons muss dasselbe name-Attribut aufweisen, aber einen jeweils anderen Wert für value.
  • Nur der Wert des markierten Radiobuttons wird mit den Formulardaten übertragen, nicht aber die Werte nicht gewählter Radiobuttons.
Attribute bei type="radio"
checked, form, required, name, value

Immer mit label-Tag

Checkbox und Radiobutton sind winzig kleine Felder für große Finger auf dem Touchscreen. Der Barrierefreiheit (nicht nur auf Handys) zuliebe sitzen sie am besten in einem HTML label-Tag, das mit CSS padding für eine ausreichend große Schaltfläche sorgt.

input type image

<input type="image" src="bild.png" alt="Senden">

funktioniert wie die submit-Schaltfläche, setzt aber eine Grafik anstelle der Browservorgabe ein.

  • Die Schaltfläche kann auch eine maussensitive Image Map sein. Beim Klick mit der Maus übergibt der Browser auch die xy-Koordinaten (in Pixel) an die Anwendung. Wenn diese Koordinaten von der Anwendung ausgewertet werden, empfiehlt das W3C die Benutzung mehrerer Grafikschaltflächen oder serverseitige Image Maps.
  • src gibt den Pfad zum Speicherplatz der Datei an.
  • Ein alt-Attribut ist ein MUSS, um einen alternativen Text zeigen, falls der Browser keine Bilder darstellen kann und wird zu jedem Eingabefeld vom Typ image gesetzt werden, um ein barrierefreies Formular zu gestalten.
Attribute bei type="image"
alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, src, width

type button

<input type="button" value="ABG zeigen">

erzeugt eine Schaltfläche, die geklickt wird, damit ein Script eine Aktion durchgeführt – z.B. weitere Eingabefelder bereitstellt. Dabei werden aber keine Daten zur Anwendung übertragen.

  • Wenn das Formular zurückgesetzt oder abgeschickt werden soll, sollen type="reset" und type="submit" angewendet werden
  • Das value-Attribut stellt einen Text in der Schaltfläche dar. Der Text auf der Schaltfläche bestimmt die minimale Größe. Eine andere Größe und die Farbe können durch CSS festgelegt werden.

Denselben Effekt hat auch ein HTML button-Tag mit type="button".

Attribute für type="button"
disabled, value
Suchen auf mediaevent.de