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.

Little Boxes – die HTML-Basics

Ein Kontaktformular erstellen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Im Web basieren alle Interaktionen mit den Besuchern auf Formularen. In diesem Video erstellen Sie den HTML-Text für ein einfaches Kontaktformular.

Transkript

Hier auf der Kontaktseite soll ein kleines, einfaches Kontaktformular hin mit einem Feld für den Besuchernamen, für die E-mail-Adresse, für die Nachricht und einem Button zum Abschicken. Und dazu öffne ich die kontakt.html im Editor, schreibe hier statt "Bitte schreiben Sie uns" gleich mal rein "Bitte füllen Sie alle Fomularfelder aus" Und das kommt ein großes f. Und darunter kommt das Formular. Das ist mit einem HTML-Element form, kurz für formular. So, das umschließt das gesamte Formular. Das hat ein paar Attribute. Ich nehme hier mal eine class="kontaktfomular"*, kann auch eine id sein, das ist nicht so entscheidend. Und ein Attribut action, mit dem das Reiseziel der Formulardaten angegeben wird, wenn auf den Abschicken Button geklickt wird. Das Reiseziel ist nötig, weil die Formulardaten müssen irgendwo von irgendwem verarbeitet werden. Dazu brauchen sie ein serverseitiges Programm, meist in PHP geschrieben, das die Daten in irgendeiner Form verwertet. Sei es, dass sie per Email weitergeschickt werden, in einer Datenbank gespeichert, dass damit eine Bestellung angestoßen wird. Das kann weder HTML noch CSS, dazu brauchen Sie hier bei action ein Reiseiziel, dazu später mehr. Die Formularfelder selbst werden mit ihrer Beschriftung jeweils von einem div gruppiert. Das ist auch nicht Pflicht, aber das macht die Sache einfacher. Denn hier gibt es ein label, eine Beschriftung, wie zum Beispiel "Ihr Name:" und ein input-Feld vom Typ text. Das sind einzeilige Felder und die gehören zusammen die beiden und werden von einem div umgeben, damit man sie später leichter gestalten kann. So, hier kommt eine id rein, das muss diesmal auch eine id sein. Ich nenne das mal "besuchername" Be-su-cher-name, so. Dann gibt es diesen Besuchernamen gleich doppelt. Das klingt zunächst ein bisschen seltsam hier id="besuchername", name="besuchername" Und dann ist das Ganze zu Ende. Es gibt kein /input. input ist ein leeres HTML-Element. Die id benötigen Sie a) zum Gestalten und b) damit der Browser weiß, dass label und input-Feld zusammengehören. Da gibt's beim label das Attribut for ="besuchername". Und das for sucht nach einer id und muss denselben Wert haben. Das ist eine logische Verbindung, damit der Browser weiß, dass die beiden zusammengehören. In diesem Falle ist es, wenn ich hier mal in den Browser gehe, recht eindeutig. Die stehen ja direkt hintereinander weg, aber manchmal ist es nicht ganz so klar. Und durch diese Verknüpfung hier weiß der Browser, dass die beiden Felder zusammengehören. Der Name, das Attribut name, das wird im serverseitigen Programm benötigt, das ist eine Variable mit dem Namen besuchername. Und das, was der Besucher reinschreibt in das Feld, das ist der Inhalt dieser Variablen. Das können Sie sich vorstellen, wie so einen kleinen Tuppertopf steht von draußen drauf Besuchername und das, was der Besuher in das Feld reinschreibt, in das Formularfeld hier, das wird in diesen Tupfertopf gelegt und dann verschickt. So, ich hab das einmal kopiert hier. Das Feld, das zweite Feld, ist ähnlich. Das geht um die E-mail-Adresse. So. Und das ist dann auch Typ-Email. Das ist gerade auf Touch-Screen sehr schön, weil der Browser dann schon gleich die entsprechende Tastatur servieren kann, wo das @-Zeichen drauf ist und der Punkt, das ist ein kleiner, aber feiner Unterschied, und ein moderner Browser kann gleich gucken, ob da auch wirklich eine E-mail-Addresse drin steht, also zumindest ein @-Zeichen vorhanden ist. label for="besuchermail" id="besuchermail" Die beiden müssen übereinstimmen. name="besuchermail" Und type="email". So, jetzt wird's etwas anders, jetzt kommt das mehrzeilige Feld. Das ist erstmal wieder ein label for="nachricht" So, und da steht dann Ihre Nachricht, na, dann sollte ich hier auch noch'n e, sehe ich gerade. Ihre E-Mail-Adresse, Ihre Nachricht. So. Und hier kommt jetzt textarea. Das ist das Element für ein mehrzeiliges Feld. id ist gleich "nachricht", damit for und id eine Verknüpfung haben, eine logische. Und name ist auch wieder gleich nachricht. So. Jetzt die Anzahl der Spalten für dieses Feld, also ich geb die Größe an. Das sind Pflichtattribute. Ich mach es 20 Spalten und 5 Zeilen. Das kann man später ändern. Auch im CSS kann man das überschreiben. Aber es muss hier etwas stehen. Wichtig ist, dass zwischen diesem (größer als), zwischen dem schließenden (größer als) von textarea von /textarea kein Zeilenumbruch ist und keine Leerstelle und nichts. Das könnte der Browser ansonsten falsch verstehen. So, zum guten Abschluss hier fehlt noch ein Button zum Abschicken. Ich werd mal ganz kurz einmal rübergehen in den Browser. Einmal speichern. Einmal zeigen, wie weit das bis jetzt. Common schief, das wird gleich mit einem br behoben oder per CSS später. Die Felder, man kann schon reinklicken. Und es fehlt eigentlich nur noch ein Button zum Abschicken, den ich jetzt hier baue. Und das ist ein input type="submit". So, und ein Submit-Button hat ein value, einen Wert und der wird benutzt hier zur Beschriftung des Buttons. input type="submit" value="Abschicken" So, und da unten drunter ist der Button. Das ist Common Schief. Zum Beheben dieser Common-Schiefheit würde man CSS benötigen. Das haben wir im Moment noch nicht. Also kann man eine Sofortmaßnahme ergreifen und jeweils label und Formularfeld auf zwei verschiedene Zeilen setzen. So, ein br jeweils, ein Zeilenumbruch und dann sehen Sie hier, das sieht schon etwas geordneter aus. Es ist nicht hübsch, aber für'n Provisorium reicht es. Und wenn man jetzt noch ein Reiseziel für die Formulardaten definiert, dann kann man es tatsächlich schon benutzen.

Little Boxes – die HTML-Basics

Sehen Sie, wie HTML und CSS funktionieren und lernen Sie die dabei die unabdingbaren Grundlagen der Webprogrammierung kennen.

3 Std. 3 min (41 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!