Sie sind hier: Startseite -> HTML-Grundlagen -> Checkbox (Formulare)

Checkbox in HTML-Formulare einbauen

Ja/Nein-Situationen im Formular

Das Formular auf einer Webseite wird in den meisten Fällen vor allem durch die Textfelder, die man über den input-Tag herstellen kann, entwickelt. In den Textfeldern können Zahlenwerte ebenso eingetragen werden wie auch Textinformationen und es gibt noch andere Felder für die Eingabe.

Abseits der Textfelder, die manchmal auch mehrzeilig angeboten werden, um längere Texte schreiben zu können, gibt es aber weitere Optionen, die ebenfalls über den input-Tag hergestellt werden können. Der Unterschied wird durch den Zusatz "type" erzeugt. Eine solche Lösung ist das Erstellen einer Checkbox zum Abhaken.

Checkboxen bei mehreren Optionen im Formular


Webhosting mit viel Software bei Alfahosting (Affiliate-Link)


ergibt:

Österreich
Deutschland
Schweiz

Bei den Checkboxen handelt es sich um die kleinen quadratischen Felder innerhalb eines Formulares, die man per Mausklick aktivieren oder auch wieder deaktivieren kann. Sie stellen die klassische Ja/Nein-Situation dar und helfen bei komplexen Themen und Fragestellungen Zeit sparen, denn man braucht die oft langen Fragen nur per Mausklick zu beantworten.

Die Alternative wäre eine oft umständliche Frage, die Mehrarbeit beim Auswerten der Daten bedeuten würde und die auch mehr Zeit beim Beantworten in Anspruch nimmt.

Einsatzmöglichkeiten der Checkboxen


Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)


Gerade bei Online-Anfrage zu Themen wie Versicherungen oder ähnlichen Fragestellungen kann man mit der Checkbox schnell abklären, ob man schon eine solche Versicherung abgeschlossen hat. Die Checkbox wird auch gerne eingesetzt, um bei einer Warenbestellung seine Zustimmung oder Ablehnung kundzutun, ob man den Newsletter über neue Angebote erhalten möchte oder nicht. Oben sehen Sie ein Beispiel mit einer Länderabfrage. Je nachdem, ob man in Österreich, Deutschland oder in der Schweiz zu Hause ist, wählt man als Besucher das entsprechende Kästchen aus.

Es gibt viele solcher Situationen beim Aufbau von Formularen und durch den input-Tag und dem Zusatz type=checkbox lassen sich die Checkboxen leicht erstellen. Als Ergebnis erhält man nach dem Abschicken durch die Besucher eine "1" oder "0", wobei 1 für aktiviert und 0 für deaktiviert steht. Mit der Ergänzung checked = "checked" kann man dem Formular eine Voreinstellung mitgeben. Die Checkbox, die so definiert ist, ist bei Laden des Formulars aktiviert.

Das obige Beispiel zeigt aber auch, dass man normalen Text an das Skript schicken kann. In diesem Fall wird der Ländername mitgeteilt.

Lesen Sie auch

Die Formulare sind überraschend wichtige Elemente auf der Webseite, denn jede größere Plattform hat auch eine Suchmaschine und damit auch ein Eingabefeld - ergo ein Formular für diesen Zweck. Es gibt aber unterschiedliche Methoden, was und wie man für das Formular braucht. Typisch sind das Textfeld, das versteckte Textfeld für Bearbeitungen wie der aktuellen Artikelnummer und ein großes mehrzeiliges Feld für Fragen und Kommentare. Außerdem braucht es das form-Tag als generelles Element für Formulare und die Schaltfläche zum Abschicken.

Weitere Möglichkeiten bestehen mit Auswahlfeldern. Das kann die Checkbox sein, um eine Antwortoption zu aktivieren, die Radiobuttons für ja/nein-Situationen oder auch die Auswahlliste, wenn mehrere Antworten vorgeschlagen werden.

Bei den Formularen gibt es noch weitere Möglichkeiten, die sehr wichtig sein können. Eine Variante ist die Beschreibung durch den label-Tag, wodurch auch die Formatierung besser gelingt und eine weitere kann sein, dass man schreibgeschützte Felder einsetzt.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Checkbox in HTML-FormulareArtikel-Thema: Checkbox in HTML-Formulare einbauen
Beschreibung: Mit 🌍 Checkboxen kann man eine einfache Feldlösung für ✅ Formulare auf der Webseite einrichten, etwa bei mehreren Optionen zu einer Frage.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel