HTML-Formulare - Radio-Button und Checkbox

16.05 2007
0

Single- und Multiple-Choice. In HTML sind damit der Radio-Button und die Checkbox gemeint.

Für Mehrfachauswahl (Multiple-Choice): Checkbox

Eine Checkbox ist ein kleines ankreuzbares Quadrat. Bei mehreren Checkboxes, die in einer Gruppe zusammen gehören, kann der Anwender keines, eines oder mehrere auswählen. Eine Checkbox wird über folgende Angabe definiert.

<input type="Checkbox">

Attribut: name=”“

Jede Checkbox muss einen internen Namen erhalten, und zwar mit dem Attribut name. 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. Bei der Wahl des Namens gilt folgendes: Der vergebene Name wird bei Verarbeitungs-Scripten benötigt, um auf die Daten der Checkboxes zugreifen zu können. Der Name sollte nicht zu lang sein und darf keine Leerzeichen, Sonderzeichen oder Umlaute enthalten. Das erste Zeichen muss ein Buchstabe sein, danach sind auch Ziffern erlaubt. Benutzen Sie als Sonderzeichen im Namen höchstens den Unterstrich (_).

<input type="Checkbox" name="Kenntnisse">

Attribut: value=”“

Mit dem Attribut value wird der interne Wert für jede Checkbox bestimmt. Wenn der Anwender das Formular abschickt, werden die Werte aller angekreuzten Checkboxen übertragen. Bei mehreren Checkboxen, die zu einer Gruppe gehören (also alle den gleichen Namen haben), sollte für jede Checkbox ein individueller Wert vergeben werden.

<input type="Checkbox" name="Kenntnisse" value="HTML">

Attribut: checked (optional)

Um Checkboxen vorzuselektieren, wird das Attribut checked verwendet. Bei Checkboxen können mehrere Einträge vorselektiert werden.

<input type="Checkbox" name="Kenntnisse" value="HTML" checked="checked">

Die eigentliche Beschriftung der Checkbox wird vor oder hinter den <input>-Tag gesetzt.

Beispiel:

Kenntnisse
HTML
Javascript
PHP
Python

Kenntnisse<br />
<input type="checkbox" name="Kenntnisse" value="HTML" /> HTML<br />
<input type="checkbox" name="Kenntnisse" value="JS" /> Javascript<br />
<input type="checkbox" name="Kenntnisse" value="PHP" /> PHP<br />
<input type="checkbox" name="Kenntnisse" value="Python" /> Python

Tipp: Verwenden Sie den WebMart Formular-Generator um einfach und schnell individuelle Formulare zu erstellen.


Single-Choice: Der Radio-Button

Radio-Buttons sind eine Gruppe von beschrifteten Knöpfen, von denen ein Anwender genau einen auswählen kann. Ein Radio-Button wird über folgende Angabe definiert.

<input type="Radio">

Attribut: name=”“

Jeder Radio-Button muss einen internen Namen erhalten, und zwar mit dem Attribut name. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Elementen kann der Anwender genau eines auswählen. Bei der Wahl des Namens gelten die gleichen Regeln wie bei den Checkboxen.

<input type="Radio" name="Anrede">

Attribut: value=”“

Mit dem Attribut value wird der interne Wert für jeden Radio-Button bestimmt. Wenn der Anwender das Formular abschickt, wird der Wert des ausgewählten Radio-Buttons übertragen. Jeder Radio-Button, der zu einer Gruppe gehört (also alle den gleichen Namen haben), sollte für jeden Radio-Button ein individueller Wert vergeben werden.

<input type="Radio" name="Anrede" value="Herr">

Attribut: checked (optional)

Um einen Radio-Button einer Gruppe vorzuselektieren, wird das Attribut checked verwendet. Bei Radio-Buttons kann nur ein Eintrag pro Gruppe vorselektiert werden.

<input type="Radio" name="Anrede" value="Herr" checked="checked">

Die eigentliche Beschriftung des Radio-Buttons wird vor oder hinter den <input>-Tag gesetzt.

Beispiel

Anrede:
Herr Frau

Anrede:<br />
<input type="Radio" name="Anrede" value="Herr" checked="checked" /> Herr
<input type="Radio" name="Anrede" value="Frau" /> Frau

Tipp: Verwenden Sie den WebMart Formular-Generator um einfach und schnell individuelle Formulare zu erstellen.

Folgen Sie WebMart auf Twitter, um automatisch über Neuigkeiten in diesem Blog informiert zu werden.


Kommentare