4.8.9 Radio-Buttons
- 1 Allgemein
- 2 Beschriftung der Gruppe der Radio-Buttons
<label> - 3 "Input"-Element für Checkboxen
<input> - 4 Ein zusätzliches Eingabefeld
- 5 Beispiel von Radio-Buttons und einem einem Eingabefeld
- 6 Grundlagen-Websites & Workshops
|
Technik
|
Anwendung
|
⇧ 1 Allgemein
Prinzip
- Radio-Buttons sind eine Gruppe von beschrifteten Knöpfen (Clickboxen) , von denen der Anwender einen auswählen und markieren kann.
⇧
2 Beschriftung der Gruppe der Radio-Buttons
<label>
- a) Beschriftung der Gruppe der Radio-Buttons
<label>...</label> - b) Formatierung der Beschriftung
<label class="clickbox">
↑
a) Beschriftung der Gruppe der Radio-Buttons
<label>...</label>
Prinzip der Beschriftung der Gruppe der Radio-Buttons
-
Die Beschriftung der Gruppe der Radio-Buttons erfolgt mit Labels.
-
Die Beschriftung wird zwischen
<label>und</label>eingegeben. -
Diese Beschriftung bezieht sich auf die ganze Gruppe der Radio-Buttons.
-
Der Name der einzelnen Radio-Buttons 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 Radio-Buttons
<input>
- a) Input-Format
<input class="checkbox"> - b) Input-Typ
<input type="checkbox"> - c) Namen der einzelnen Radio-Buttons
<input>... - d) Abschluss des Inputs
<input>...<br>
↑
a) Input-Format <input class="checkbox">
Formatierung von Radio-Buttons
-
Die Formatierung der Radio-Buttons 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 kann ein Radio-Button vorselektioniet werden.
-
Mit Input-Code
checked="checked"kann ein Radio-Button vorselektioniet werden.
↑
c) Namen der einzelnen Checkboxen <input>...<br>
Namen der einzelnen Radio-Buttons
-
Die Namen werden nach dem Input-Tag eingegeben
<input>...<br>
↑
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 Radio-Buttons und einem Eingabefeld
Zusammenfassung
1) Formularbox
-
Zwischen
<form>und</form>werden die Elemente der Radio-Buttons eingetragen.
Formulare:
Formularbox
2) Beschriftung der Gruppe der Radio-Buttons
-
Die Formatierung der Beschriftung der Labels erfolgt mit einer Stylesheet "Class"-Formatierung.
Stylesheet:
label.clickbox {...}Quelltext:
label class="clickbox"
3) "Inputs" der Radio-Buttons
-
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.radio {...}Quelltext:
input type="radio" -
c) Name
Die Namen der einzelnen Radio-Buttons 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>Geben Sie Ihre Zahlungsweise an:</p> <label class="clickbox" for="mastercard">Kreditkarten</label><br> <input class="clickbox" type="radio" name="zahlungsweise" id="mastercard" value="mastercard"> Mastercard<br> <label class="clickbox" for="visa"></label> <input class="clickbox" type="radio" name="zahlungsweise" id="visa" value="visa" checked="checked"> Visa<br> <label class="clickbox" for="americanexpress" ></label> <input class="clickbox" type="radio" name="zahlungsweise" id="americanexpress" value="americanexpress"> American Express<br> <label for="rad_andere">Andere</label> <input type="text" name="rad_andere" id="rad_andere" size="30" maxlength="40" value=""><br> </form>
3) Dokument
⇧ 5 Grundlagen-Websites & Workshops
- SELFHTML-Wiki de HTML/Formulare/Radio-Buttons Beispiel