Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆4. 8. 10 Checkboxen

4.8.10 Checkboxen

Technik

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Beschriftung mit Labels

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Druckknöpfe (Buttons)

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Eingabefelder definieren

    

Anwendung

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Formularbox

-

1 Allgemein

Prinzip

-

2 Beschriftung der Gruppe der Checkboxen <label>

-

a) Beschriftung der Gruppe der Checkboxen <label>...</label>

Prinzip der Beschriftung der Gruppe der Checkboxen

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Beschriftung mit Labels

-

b) Formatierung der Beschriftung <label class="clickbox">

Stylesheet der Labels label.clickbox {...}

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Druckknöpfe (Buttons)

Quelltext der Beschriftung <label class="clickbox">

-

3 "Input"-Element für Checkboxen <input>

-

a) Input-Format <input class="checkbox">

Formatierung von Checkboxen

Stylesheet der Clickboxen input.clickbox {...}

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Druckknöpfe (Buttons)

Quelltext der Formatierung von Clickboxen <input class="clickbox">

-

b) Input-Type <input type="checkbox">

Typ des Druckknopfes <input type="checkbox">

Vorselektionierung

-

c) Namen der einzelnen Checkboxen <input>...<br>

Namen der einzelnen Checkboxen

-

d) Abschluss des Inputs <input>...<br>

Wichtig

-

4 Ein zusätzliches Eingabefeld

Label des Eingabefeldes

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Beschriftung mit Labels

Input des Eingabefeldes

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Eingabefelder definieren

-

5 Beispiel von Checkboxen und einem einem Eingabefeld

Zusammenfassung

1) Formularbox

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Formularbox

2) Beschriftung der Gruppe der Checkboxen

3) "Inputs" der Checkboxen

4) Zusätzliches Eingabefeld

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Beschriftung mit Labels

Pfeil nach rechts (Icon)
      120 x 120 Pixel 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

Kreuzen Sie die gewünschten Zutaten an:


Salami
Pilze
Sardellen
Oliven

-

5 Grundlagen-Websites & Workshops