Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Formulare mit HTML und CSS

Formular definieren – so geht’s

Testen Sie unsere 2021 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Die Grundstruktur aller Formulare ist gleich: ein umfassendes form-Element, in dem sich die einzelnen Felder wie Textfelder und Absendebuttons befinden.

Transkript

Formulare sind ein wichtiger Bestandteil von Webseiten, weil sie die beste Art sind, Input vom Besucher zu erhalten. Formulare gibt es beispielsweise für Support-Anfragen oder auch Kontaktformulare. Formulare sind typisch für Kommentare bei Blogs. Es gibt aber auch Formulare, die nur aus einem Feld bestehen. Zum Beispiel bei der Suche. Formulare folgen alle dem gleichen Grundprinzip. Sie werden von einem Formelement umfasst. In diesem Formelement stehen die einzelnen Formularfelder. Ich möchte ein Feld machen, wo man einen Vornamen eingibt. Dafür verwende ich ein Textfeld. Das ist ein Input-Feld. Input-Felder sind bei Formularen ganz wichtig. Dahinter schreibt man den Typ. In diesem Fall soll es ein Textfeld sein. Ebenfalls entscheidend ist, dass ich das Feld benenne. Das ist wichtig für die Weiterverarbeitung. Dann kann ich auch noch einen Absende-Button ergänzen. Der ist vom Typ Submit. Ich brauche gar nicht unbedingt einen Namen. Auf diese Art habe ich ein kleines Formular erstellt. Sehen wir uns das einmal im Browser an. Dann ist es ein Formular, wo ich hier etwas reinschreiben kann, und dann auf Daten absenden gehen. Der Text Daten absenden kommt vom Browser. Ich habe ihn nirgendwo hingeschrieben. Wenn ich ihn ändern möchte, kann ich value angeben und einen anderen Text schreiben. und los! Wenn wir uns das jetzt ansehen, sieht man den geänderten Text. Bei Textfeldern gibt es noch weitere Optionen, was man angeben kann. Man kann die maximale Länge bestimmen. Also wie viel Text höchstens eingegeben werden soll. Ich stelle das auf einen kleinen Wert wie 20, dass wir uns das ansehen können. Wenn ich jetzt zu tippen beginne, dann geht es irgendwann nicht mehr weiter, wenn ich eben 20 Zeichen eingegeben habe. Außerdem können wir auch direkt in Formularfelder etwas reinschreiben. Bei einem Beispiel mit Vornamen ist das nicht unbedingt sinnvoll. Aber wenn ich das jetzt aktualisiere, dann steht der Wert direkt drin, den ich im Formularfeld bei value hingeschrieben habe. Bei einem Vornamen wäre es natürlich nicht sinnvoll, da schon etwas reinzuschreiben. Außer man macht das bei einer serverseitigen Überprüfung und möchte die vorher eingegebenen Werte mit da reinschreiben. Aber es ist wichtig zu wissen, dass das über value geschieht. Bei den Formularfeldern gibt es jetzt eine Besonderheit. Ich habe dieses Input-Feld, wenn wir uns das einmal ansehen. Das ist ein sogenanntes leeres Element, weil es nicht aus Start-Tag und End-Tag besteht, sondern nur aus einem Start-Tag. Solche leeren Elemente können Sie jetzt auf verschiedene Art schreiben. Sie können die direkt so hinschreiben wie ein Start-Tag. Sie können aber auch das, was man in XHTML gemacht hat, die Elemente direkt schließen, indem Sie am Ende so einen Slash hinschreiben. In HTML5, was in diesem Beispiel verwendet wird, sind beide Schreibweisen möglich. Sie könnten Sie auch mischen. Was aber natürlich nicht so schön ist. Sie haben gesehen, wie Formulare aufgebaut werden. Entscheidend ist das Formelement, was alles umschließt. Für Textfelder verwenden Sie input type = "text". Entscheidend und ganz wichtig für die Weiterverarbeitung ist, dass Sie solche Felder benennen mit dem name-Attribut. Zum Absenden gibt es ein Input-Feld von type = "submit". Den Text, der dann auf diesem Absende-Button erscheint, können Sie über value festlegen.

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!