Radiobuttons und Checkboxen im Browser
Radiobuttons sind eine Gruppe von beschrifteten Knöpfen mit gleichem Namen, von denen der Anwender einen auswählen kann. Es kann immer nur einer der Radiobuttons ausgewählt sein.
Eine Checkbox ist eine ankreuzbare (aktivierbare) Option. Sie kann entweder einzeln vorkommen, oder auch als Gruppe von Checkboxen mit gleichem Namen. Bei einer Gruppe kann der Anwender keine, eine oder mehrere Checkboxen ankreuzen.
<form action="test.php" method="post"> <p>Unterkunft:<br> <input type="radio" name="uk" value="EZ BR" checked> EZ Frühstück<br> <input type="radio" name="uk" value="DZ BR"> DZ Frühstück<br> <input type="radio" name="uk" value="EZ HP"> EZ Halbpension<br> <input type="radio" name="uk" value="DZ HP"> DZ Halbpension<br> <input type="radio" name="uk" value="EZ VP"> EZ Vollpension<br> <input type="radio" name="uk" value="DZ VP"> DZ Vollpension </p> <p>Optionen:<br> <input type="checkbox" name="opt[]" value="parken"> Parkplatz<br> <input type="checkbox" name="opt[]" value="internet"> Internet<br> <input type="checkbox" name="opt[]" value="sauna"> Sauna<br> <input type="checkbox" name="opt[]" value="vegkost"> Vegetarisch<br> <input type="checkbox" name="opt[]" value="raucher"> Raucher<br> </p> <p>Interner Vermerk:<br> <input type="checkbox" name="tourist"> Tourist<br> </p> <input type="submit" value="senden"> </form>
Radiobuttons werden durch <input type="radio" …> markiert. Jeder Radiobutton sollte mit dem name-Attribut einen internen Bezeichnernamen erhalten. Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe, d.h. von diesen Buttons kann der Anwender genau einen auswählen.
Checkboxen werden durch <input type="checkbox" …> markiert. Jede Checkbox sollte mit dem name-Attribut einen internen Bezeichnernamen erhalten. Wenn Checkboxen eine Gruppe bilden sollen, aus der der Anwender keinen, einen oder mehrere Einträge auswählen kann, müssen Sie für die betroffenen Checkboxen beim name-Attribut den gleichen Wert notieren.
Mit dem Attribut value bestimmen Sie einen internen Absendewert. Wenn der Anwender das Formular abschickt, wird dieser Wert zusammen mit dem Bezeichnernamen des name-Attributs übertragen. Bei einzelnen Checkboxen, so wie im untersten Fall des obigen Beispiels, ist kein value-Attribut nötig. Mit den Formulardaten wird der Bezeichnername, im Beispiel also tourist, nur dann übertragen, wenn die Checkbox angekreuzt ist. Es genügt also, bei der serverseitigen Verarbeitung abzufragen, ob der Bezeichnername übertragen wurde. Wenn ja, wurde die Checkbox angekreuzt.
Unmittelbar vor oder hinter dem <input>-Tag sollten Sie den Text notieren, der als Beschriftung der jeweiligen Option erscheint. Es handelt sich um normalen HTML-Text, der auch weitere HTML-Elemente enthalten darf.
Wenn Sie eine der Auswahlmöglichkeiten oder eine Option vorselektieren wollen, dann notieren Sie im <input>-Tag des entsprechenden Radiobuttons oder der entsprechenden Checkbox das alleinstehende Attribut checked, so wie im obigen Beispiel bei dem ersten der Radiobuttons. Mehr als eine Auswahlmöglichkeit dürfen Sie bei einer Gruppe von Radiobuttons nicht vorselektieren.
Wenn Sie XHTML-Standard-konform arbeiten wollen, müssen Sie das Attribut checked in der Form checked="checked" notieren.
Ein serverseitiges Script, das die gesendeten Formulardaten auswertet, erhält bei mehreren ausgewählten Checkboxen mit gleichem Namen den Bezeichner des name-Attributs automatisch als Array. Nur bei PHP müssen Sie etwas nachhelfen. Damit PHP einen Bezeichnernamen als Array verarbeitet, muss der Name in HTML am Ende ein Paar eckiger Klammern erhalten, so wie im obigen Beispiel bei <input type="checkbox" name="opt[]" …>.
Um besser zu verstehen, was Radiobuttons und Checkboxen an den Server übertragen, hier noch ein Szenario. Angenommen, ein Anwender lässt im Formular des obigen Beispiels als Unterkunft die Default-Einstellung EZ Frühstück ausgewählt. Im Bereich der Optionen kreuzt er an: Internet, Vegetarisch und Raucher. Außerdem kreuzt er die Option Tourist an. In diesem Fall werden folgende POST-Daten an den Server übertragen:
uk = EZ BR
opt = { internet, vegkost, raucher }
tourist = on
Das on bei tourist ist dabei ein Platzhalter, der anstelle des nicht notierten value-Attributs generiert wird.
Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.