HTML verstehen Teil 9: Das Formular III

Fortsetzung von Teil 9. Hier beginnt der Artikel!

<input>-Tag: Checkbox

Mit einer Checkbox oder auch Kontrollkästchen genannt können Sie dem Leser mehrere Möglichkeiten für eine Auswahl bieten. Die Checkbox eignet sich gut dafür Alternativen per Text anzuzeigen und der Leser entscheidet sich für eine oder mehrere!

Zur Verarbeitung einer Checkbox ist das name-Attribut und das value-Attribut absolut notwendig, denn mit dem name-Attribut wird der sowohl der Name als auch die Gruppierung von Alternativen übergeben, während das value-Attribut die unterschiedlichen Alternativen darstellt. Schauen Sie sich folgendes Beispiel an:

Tabelle
Absatz
Formular

Und hier das Coding dazu:

<table>
 <tr><td>
  <input type=“checkbox“ name=“inhalt“ value=“Tabelle“ /> Tabelle
 </td></tr>
 <tr><td>
  <input type=“checkbox“ name=“inhalt“ value=“Absatz“ /> Absatz
 </td></tr>
 <tr><td>
  <input type=“checkbox“ name=“inhalt“ value=“Formular“ /> Formular
 </td></tr>
</table>

Als Alternativauswahl müssen Sie also alle name-Attribute gleich lassen und bilden somit eine Gruppe. Wenn Sie nun noch eine Auswahl mit checked=“checked“ vorab auswählen, haben Sie die gewohnte

Beachten Sie: Das <input type=“checkbox“>-Tag stellt nur das Kontrollkästchen zur Verfügung. Den Text zur Checkbox müssen Sie selbst schreiben. Denn es muss ja nicht nur ein Wort für die Alternative sein, es kann ja auch ein ganzer Satz sein. Deshalb müssen Sie hinter das <input type=“checkbox“>-Tag gleich den Text anbringen.

Was passiert nun im Browser? Für jede Checkbox wird das name-Attribut genommen und als Formular-Variable interpretiert. Der Wert ist dann das value-Attribut, dass Sie angekreuzt haben. So kommt in obigem Beispiel im Hintergrundprogramm, wenn bspw. bei Absatz ein Häkchen gemacht wurde folgendes an:
„Seiteninhalt“ = „Absatz“. Kreuzen Sie ein anderes Kästchen an, dann wird dieser Wert übertragen.

Somit stellt die obige Auswahl eine Alternativauswahl dar, denn wenn Sie alle Häkchen setzen, wird nur die erste Alternative nach hinten übertragen. Somit stellt obiges Beispiel ein Sonderaspekt für die checkbox dar. Es gilt nur eine Auswahl – ein Häkchen!

Mehrfachauswahl können Sie nur dann machen, wenn das Hintergrundprogramm auch unterschiedliche Variablen mit Werten erhält. Ändern wir obiges Beispiel leicht um, dann wird daraus:

<table>
 <tr><td>
  <input type=“checkbox“ name=“inhalt1″ value=“Tabelle“ /> Tabelle
 </td></tr>
 <tr><td>
  <input type=“checkbox“ name=“inhalt2″ value=“Absatz“ /> Absatz
 </td></tr>
 <tr><td>
  <input type=“checkbox“ name=“inhalt3″ value=“Formular“ /> Formular
 </td></tr>
</table>

Hier sind nun die Namen der Checkboxen alle unterschiedlich, jetzt werden also maximal 3 Namen mit Werten übertragen. Denn übertragen werden nur die angekreuzten Boxen!
Wenn Sie in diesem Beispiel nun 2 Häkchen setzen, z.B. Absatz und Formular, dann wird „Seiteninhalt2“ = „Absatz“ und „Seiteninhalt3“ = „Formular“ übertragen. Also eine Mehrfachauswahl!

Somit ist das 2. Beispiel eigentlich das richtige für eine Checkbox. Denn bei der Checkbox erlaubt der Browser die Bewertung aller Checkboxen nicht nur einer! Dies steuern Sie über die unterschiedlichen name-Attribute im <input>-Tag!

Vorbesetzung von Werten in der Checkbox

Wenn Sie auf Ihrer Seite schon eine Auswahl im Voraus treffen wollen können Sie das mit dem Attribut checked=“checked“ tun. Dann wird für diese Checkbox schon beim ersten Anzeigen das Häkchen gesetzt.
[Sie finden in anderen Quellen oft nur den Ausdruck „checked“ im <input>-Tag. Dieses ist aber ein Verstoß gegen die XHTML-Syntax und wird von Validierungsprogrammen angemotzt. Nach XHTML-Standard sollten Sie checked=“checked“ schreiben.]

Beispiel:

Tabelle
Absatz
<table>
 <tr><td>
  <input type=“checkbox“ name=“inhalt1″ value=“Tabelle“ /> Tabelle
 </td></tr>
 <tr><td>
  <input type=“checkbox“ name=“inhalt2″ value=“Absatz“ checked=“checked“ /> Absatz
 </td></tr>
</table>

Zurück zur Auswahl…

<input>-Tag: Radiobutton

Ganz anders sollten Sie das sog. Radiobutton anwenden. Alles oben bei der Checkbox beschriebene, gilt im Prinzip auch für das Radiobutton. Sie können auch das Radiobutton als Mehrfachauswahl benutzen. Sie sollten es aber nicht tun!

Es hat sich einfach eingebürgert, dass man bei Radiobuttons eine Alternativauswahl anwendet: Nur eine Auswahl machen kann nicht mehrere! Checkboxen sollten Sie für Mehrfachauswahl benutzen.
Beispiel:

Tabelle
Absatz
Absatz
<table>
 <tr><td>
  <input type=“radio“ name=“inhalt“ value=“Tabelle“ /> Tabelle
 </td></tr>
 <tr><td>
  <input type=“radio“ name=“inhalt“ value=“Absatz“ checked=“checked“ /> Absatz
 </td></tr>
 <tr><td>
  <input type=“radio“ name=“inhalt“ value=“Formular“ /> Formular
 </td></tr>
</table>

Sie haben hier die gewohnte Alternativauswahl. Der Punkt springt von einer Alternative zur andern. Dies weil Sie in Feld der Radiobutton-gruppe ausgewählt und alle Elemente der Gruppe gleiches name-Attribut haben. Probieren Sie es an obigem Beispiel aus!

An den Hintergrund wird dabei der Name und sein Wert übertragen also z.B. inhalt=tabelle, wenn Sie Tabelle ausgewählt haben.

Zusammenfassung: Alternativauswahl sollten Sie mit dem Radiobutton definieren, in dem Sie

  • das name-Attribut über alle Alternativen gleiche Werte hat
  • das value-Attribut unterschiedliche Werte hat
  • Sie ein Radiobutton mit checked=“checked“ vorab auswählen

Zurück zur Auswahl…

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar