Kalender
Anmeldung
Webmail
Hilfe
SchulungFEN Startseite > ~xx502 > Forms > Lektion07
Web Formulare
Kapitel 7 - Radio Button
Mit Radio Buttons kann der Benutzer eine aus mehreren Möglichkeiten auswählen. Es kann immer nur einer der Buttons markiert sein!
|
<form> <input type="radio" name="Bewertung" /> </form> |
Ein Button alleine macht keinen Sinn, fügen wir also noch zwei weitere hinzu.
Bitte achte darauf, dass jeder Button den gleichen Namen trägt, ich erkläre gleich, warum das nötig ist.
In unserem Beispiel sollen die drei Buttons untereinander angeordnet werden, daher bitte auch an die Zeilenumbrüche denken:
|
<form> <input type="radio" name="Bewertung" /><br> <input type="radio" name="Bewertung" /><br> <input type="radio" name="Bewertung" /> </form> |
Die eben programmierten Buttons sehen noch etwas nackt aus. Der Benutzer braucht noch einen erklärenden Text, welcher Button welche Bedeutung hat.
Jedem Radio Button muß man auch einen Wert zuordnen.
|
<form> <input type="radio" name="Bewertung" value="gut" /> gut<br /> <input type="radio" name="Bewertung" value="mittel"> mittelmäßig /<br /> <input type="radio" name="Bewertung" value="schlecht" /> schlecht </form> |
Und hier die versprochene Erklärung:
Bei der Übermittlung der Formulardaten werden wie bei den letzten Kapiteln auch Name und Wert übertragen.
Zusammengehörenden Buttons haben den gleichen Namen, aber verschiedene Werte.
Nur der Wert des markierten Buttons wird beim Absenden des Formulars übertragen.
Tip:
Die Reihenfolge der Eigenschaften ist zwar frei wählbar, aber am übersichtlichsten ist es den Wert (value) - wie im Beispiel - als letztes zu notieren.
Vorauswahl eines Buttons
Die Buttons wären als definiert und alles funktioniert. Angenommen, ein Benutzer triff gar keine Auswahl, dann wird auch nichts übertragen. Um dies zu verhindert kannst du einen Button bereits markieren (Vorgabewert).
|
<form> <input type="radio" name="Bewertung" value="gut" checked="checked"> gut<br /> <input type="radio" name="Bewertung" value="mittel"> mittelmäßig<br /> <input type="radio" name="Bewertung" value="schlecht"> schlecht </form> |
Jetzt wird immer eine Angabe übertragen.
Im nächsten Kapitel stelle ich eine Möglichkeit mehrere Angaben auszuwählen.
Passwort-Eingabefeld
Inhalt
Check-Box