4.8.10 Checkboxen
- 1 Allgemein
- 2 Beschriftung der Gruppe der Checkboxen
<label> - 3 "Input"-Element für Checkboxen
<input> - 4 Ein zusätzliches Eingabefeld
- 5 Beispiel von Checkboxen und einem einem Eingabefeld
- 6 Grundlagen-Websites & Workshops
|
Technik
|
Anwendung
|
⇧ 1 Allgemein
Prinzip
- Checkboxen sind eine Gruppe von beschrifteten Knöpfen (Clickboxen) , von denen der Anwender einen oder mehrere auswählen und markieren kann.
⇧
2 Beschriftung der Gruppe der Checkboxen
<label>
- a) Beschriftung der Gruppe der Checkboxen
<label>...</label> - b) Formatierung der Beschriftung
<label class="clickbox">
↑
a) Beschriftung der Gruppe der Checkboxen
<label>...</label>
Prinzip der Beschriftung der Gruppe der Checkboxen
-
Die Beschriftung der Gruppe der Checkboxen erfolgt mit Labels.
-
Die Beschriftung wird zwischen
<label>und</label>eingegeben. -
Diese Beschriftung bezieht sich auf die ganze Gruppe der Checkboxen.
-
Der Name der einzelnen Checkboxen wir nicht hier eingegeben.
Formulare:
Beschriftung mit Labels
↑
b) Formatierung der Beschriftung
<label class="clickbox">
-
Die Formatierung erfolgt mit einer "Class"-Formatierung mit einen Stylesheet.
Stylesheet der Labels label.clickbox {...}
Formulare:
Druckknöpfe (Buttons)
Quelltext der Beschriftung <label class="clickbox">
-
Weitere Angaben: Siehe Beispiel.
⇧
3 "Input"-Element für Checkboxen
<input>
- a) Input-Format
<input class="checkbox"> - b) Input-Typ
<input type="checkbox"> - c) Namen der einzelnen Checkboxen
<input>... - d) Abschluss des Inputs
<input>...<br>
↑
a) Input-Format <input class="checkbox">
Formatierung von Checkboxen
-
Die Formatierung der Checkboxen erfolgt mit einer Class-Formatierung mit einem Stylesheet.
-
Dazu wird die Formatierung von Clickboxen verwendet.
Stylesheet der Clickboxen input.clickbox {...}
Formulare:
Druckknöpfe (Buttons)
Quelltext der Formatierung von Clickboxen <input class="clickbox">
↑
b) Input-Type <input type="checkbox">
Typ des Druckknopfes <input type="checkbox">
-
Checkboxen werden durch
<input type="checkbox">definiert. -
Alle "Input"-Elemente einer Gruppe haben den gleichen Namen
name="...". -
Die Werte
value="..."der gewählten Checkboxen werden beim Absenden des Formulars mit übertragen.
Vorselektionierung
-
Es können mehrere Checkboxen vorselektioniet werden.
-
Mit Input-Code
checked="checked"kann eine oder mehrere Auswahlmöglichkeit vorselektioniet werden.
↑
c) Namen der einzelnen Checkboxen <input>...<br>
Namen der einzelnen Checkboxen
-
Die Namen werden nach dem Input-Tag eingegeben
<input>...<br> -
Das Input-Tag ist ein so genanntes Standalone-Tag und hat keinen Endtag.
↑
d) Abschluss des Inputs
<input>...<br>
Wichtig
-
Das Input-Tag ist ein so genanntes Standalone-Tag und hat keinen Endtag.
Nach jedem
<input>...muss ein Zeilenumbruch<br>eingefügt werden.
⇧ 4 Ein zusätzliches Eingabefeld
Label des Eingabefeldes
Formulare:
Beschriftung mit Labels
Input des Eingabefeldes
Formulare:
Eingabefelder definieren
⇧ 5 Beispiel von Checkboxen und einem einem Eingabefeld
Zusammenfassung
1) Formularbox
-
Zwischen
<form>und</form>werden die Elemente der Checkboxen eingetragen.
Formulare:
Formularbox
2) Beschriftung der Gruppe der Checkboxen
-
Die Formatierung der Beschriftung der Labels erfolgt mit einer Stylesheet "Class"-Formatierung.
Stylesheet:
label.clickbox {...}Quelltext:
label class="clickbox"
3) "Inputs" der Checkboxen
-
a) Formatierung
Die Formatierung der "Inputs" erfolgt mit einer "Class"-Formatierung.
Stylesheet:
input.clickbox {...}Quelltext:
input class="clickbox" -
b) Typ
Damit die Clickboxen den Typ der Radio-Buttons erhalten wird folgende "Class"-Formatierung verwendet.
Stylesheet:
type.checkbox {...}Quelltext:
input type="checkbox" -
c) Name
Die Namen der einzelnen Checkboxen werden nach dem Input-Tag eingegeben.
<input>... -
d) Abschluss
Das Input-Tag ist ein so genanntes Standalone-Tag und hat keinen Endtag.
Nach jedem
<input>...muss ein Zeilenumbruch<br>eingefügt werden.
4) Zusätzliches Eingabefeld
Formulare:
Beschriftung mit Labels
Formulare:
Eingabefelder definieren
Beispiel von Checkboxen und einem einem Eingabefeld
<form action="..." method="post"> <p>Kreuzen Sie die gewünschten Zutaten an:</p><br> <label class="clickbox" for="salami">Zutaten</label><br> <input class="clickbox" type="checkbox" name="zutat" id="salami" value="salami"> Salami<br> <label class="clickbox" for="pilze"></label> <input class="clickbox" type="checkbox" name="zutat" id="pilze" value="pilze"> Pilze<br> <label class="clickbox" for="sardellen"></label> <input class="clickbox" type="checkbox" name="zutat" id="sardellen" value="sardellen"> Sardellen<br> <label class="clickbox" for="oliven"></label> <input class="clickbox" type="checkbox" name="zutat" id="oliven" value="oliven"> Oliven<br> <label for="check_andere">Andere</label> <input type="text" name="check_andere" id="check_andere"size="30" maxlength="40" value=""><br> </form>
3) Anzeige im HTML-Dokument
⇧ 5 Grundlagen-Websites & Workshops
- SELFHTML-Wiki de HTML/Formulare/Checkboxen Beispiel