Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Formulare mit HTML und CSS

Radiobuttons und Checkboxen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wenn nur eine Handvoll Möglichkeiten zur Auswahl stehen, sollte man nicht mit Textfeldern, sondern beispielsweise mit Radiobuttons oder Checkboxen arbeiten.

Transkript

In Textfelder kann der Benutzer beliebigen Text reinschreiben. Wenn hingegen nur bestimmte Sachen zur Auswahl stehen, sollten Sie nicht Textfelder wählen, sondern zum Beispiel Radio Buttons. Wenn nur zwei zur Auswahl stehen, ist das über Radio Buttons besser gelöst. Für bestimmte Fälle ist auch eine Checkbox sinnvoll. Zum Beispiel, dass ein Newsletter abonniert werden soll. Das sind solche Ja-/Nein-Felder. Sehen wir uns an, wie man die erstellt und beginnen mit den Radio Buttons. Radio Buttons sind ebenfalls Input-Elemente. Sie brauchen aber type="radio". Außerdem haben sie einen Namen, wie auch andere Formularfelder. Wichtig ist auch der value. Das ist das, was später übertragen wird. In diesem Fall, wenn das ausgewählt wird, wird übertragen: Anrede = Frau. Zudem habe ich eine ID eingesetzt, weil ich den Bezug zum Label-Feld herstellen möchte, was denselben Wert bei for hat. Genauso funktioniert auch das zweite Radio-Feld. type="radio", name="anrede". Das ist ein wichtiger Punkt. Bei Radio Buttons ist es ja so, wenn ich den einen auswähle, dann wird der andere deaktiviert. Damit das funktioniert, muss ich bei einer Gruppe Radio Buttons bei name immer denselben Wert angeben. Sehen wir uns an, was ich tun muss, wenn ich einen dritten Radio Button ergänze. type="radio", name="anrede" lasse ich, Ich möchte, dass jetzt auch angegeben werden kann: Firma. Und vor firma schreibe ich den Text. Wenn wir das kontrollieren, dann funktioniert das und ich kann die einzeln auswählen. Sie sehen auch den schönen Effekt von unseren Beschriftungen. Wenn ich auf die Beschriftung klicke, wird das zugehörige Feld ausgewählt. Entscheidend, wie gesagt, dass bei name dasselbe steht. Wenn ich mich da einmal verschreibe, werden Sie sehen, dass die Gruppe nicht mehr funktioniert. Dann kann ich jetzt Firma und Herr oder Firma und Frau auswählen, weil an dieser Stelle nicht mehr derselbe Wert steht. Wenn eine Option schon ausgewählt sein soll, dann ergänzen Sie checked. Dann ist in diesem Fall Frau direkt ausgewählt. Falls Sie die XHTML-Schreibweise bevorzugen, die dürfen Sie in HTML5 natürlich auch machen, dann schreiben Sie checked="checked". Sie würden aber dann, damit es konsistenter ist, wahrscheinlich auch die Formularfelder so schließen. Ich entscheide mich aber für die HTML-Schreibweise. In HTML5 ist beides möglich. Kommen wir zur Checkbox. Die funktioniert ganz ähnlich wie die Radio Buttons. Entscheidend ist input type="checkbox". Ich vergebe einen Namen, eine ID und einen Wert. Wenn das Ganze übertragen wird, wird der Name und der Wert übertragen. Also News: Ja. Den Bezug zur Beschriftung stelle ich über die ID wieder her, Sehen wir uns das an. Das ist diese Checkbox. Kann ich auswählen. Wieder kann ich auf die Beschriftung klicken, um meine Auswahl zu treffen. Wenn ich möchte, dass das Feld direkt ausgewählt werden soll, dann ergänze ich checked. Dann ist es direkt schon angekreuzt. Sie haben im Film gesehen, wie Sie Radio Buttons und Checkboxen erstellen. Entscheidend ist bei einer Gruppe von Radio Buttons, dass Sie denselben Wert bei name verwenden, damit sie als zugehörig erkannt wird.

Formulare mit HTML und CSS

Lernen Sie Formulare mit HTML zu erstellen und wie die Formatierung von Formularen und die responsive Anordnung der Felder vonstatten geht.

1 Std. 16 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!