HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)

Normalerweise sollte man seinen Besuchern die Möglichkeit zur Kontaktaufnahme bieten. Im einfachsten Fall notiert man dazu eine Telefonnummer und/oder seine E-Mail-Adresse. Das kann man so machen, ist für die Besucher aber nicht sonderlich komfortabel. Daher werden wir in diesem Video-Training ein Formular erstellen, über das die Besucher denkbar einfach in Kontakt mit uns treten können. Und selbstverständlich werden dabei die Möglichkeiten genutzt, die uns HTML5 und CSS3 bieten.
... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!
In diesem ersten Teil werden die grundlegenden Einstellungen am Formular vorgenommen. Dinge wie runde Ecken, Farbverläufe usw. folgen dann im nächsten Tutorial.
Innerhalb der kontakt.html erstellt man das Formular. Dabei wird das Formular innerhalb des
div
-Bereichs mit der Klasse content
definiert. Überlegt euch anschließend, welche Felder angelegt werden sollen. Ich habe mich zur Abfrage der folgenden Informationen entschieden:• Name
• E-Mail-Adresse
• Kommentar
Ihr müsst natürlich selbst entscheiden, welche Informationen ihr einholen wollt. Prinzipiell rate ich aber dazu, nur die tatsächlich benötigten Daten abzufragen. Die meisten Besucher von Webseiten scheuen nämlich vor umfangreichen Formularen zurück. Haltet es also kurz.
Die Grundstruktur meines Formulars sieht folgendermaßen aus:
<div class="content"> <formclass="form" action="#" method="post"> <fieldset> <legend>Kontakt zu uns</legend> <ol> <li> <label for="name">Name:</label> <input type="text" name="name"id="name" value="" /> </li> <li> <label for="email">E-Mail-Adresse:</label> <input type="text" name="email" id="email"value="" /> </li> <li> <label for="comment">Kommentar:</label> <textarea cols="32" rows="7"name="content" id="content"></textarea> </li> <li class="button"> <input type="submit" name="submit"id="submit" value="Absenden" /> </li> </ol> </fieldset> </form> </div>
fieldset
-Definition angewendet. Wie sich Formularfelder anlegen lassen und was es mit den label
-Elementen auf sich hat, wurde ja bereits hinlänglich beschrieben. An dieser Stelle soll daher die volle Konzentration der Gestaltung des Formulars gelten.Ruft man das Ergebnis im Browser auf, zeigt sich zunächst einmal ein noch nicht sonderlich ansprechendes Formular.
Hier gilt es natürlich nachzubessern.
Zunächst einmal werden grundlegende Angaben zum Formular gemacht.
form { padding: 3px 0 0; margin: 10px auto; width: 550px; }
Hier werden die Außen- und Innenabstände definiert. Zudem wird für das Formular eine Breite von 550 Pixel festgesetzt.
fieldset
-Gestaltung.fieldset { padding: 10px 20px 25px; }
Auch hier werden die Abstände definiert.
Die Formularfelder selbst sind innerhalb einer geordneten
ol
-Liste angelegt.ol { list-style-type: none; margin: 0; padding: 0; }
Damit diese Liste optisch nicht mehr als Liste zu erkennen ist, wird
list-style-type: none;
verwendet. Zudem werden Ränder und Innenabstand jeweils auf 0 gesetzt.Im nächsten Schritt werden die Listeneinträge definiert. Diese floaten nach links und besitzen einen Innenabstand von 10 Pixel.
li { float: left; padding: 10px; }
Eine Besonderheit gibt es noch hinsichtlich der Schaltfläche, die unterhalb des Formulars steht. Diese soll rechts ausgerichtet werden.
li.button { float: none; clear: both; text-align: right; }
Die Formularüberschrift
Widmen wir uns nun dem legend-Element. Darüber wird die Formularüberschrift definiert.Die Definition für die Überschrift sieht folgendermaßen aus:
fieldset legend { font-weight: bold; font-size: 22px; margin: 20px 0 0 10px; }
Die Beschriftungen
Daslabel
-Element ist euch im Rahmen dieser Reihe ebenfalls bereits begegnet. Über jenes label
lässt sich ein logischer Bezug zwischen Feldbeschriftung und dem eigentlichen Formularfeld herstellen. Hinsichtlich der CSS-Definition gibt es hier übrigens eine Besonderheit.label { display:block; cursor: pointer; font-weight: bold; line-height: 24px; }
Ich statte das
label
-Element u.a. mit einer cursor
-Angabe aus. Dadurch wird den Besuchern signalisiert, dass die Feldbeschriftungen anklickbar sind. Klicken sie dann tatsächlich eine Feldbeschreibung an, wird in das dazugehörende Feld automatisch der Cursor gesetzt.Die Formularfelder gestalten
Im nächsten Schritt werden die eigentlichen Formularfelder gestaltet. Zunächst einmal werden dazu allgemeine Angaben zuinput
und textarea
gemacht.input, textarea { color: #3399FF border: 1px solid #3399FF; font: 13px Helvetica, Arial, sans-serif; padding: 8px 10px; width: 190px; }
Dabei handelt es sich ausschließlich um gestalterische Dinge. Besondere Beachtung ist auf die Rahmen zu richten. Sobald man nämlich in ein Feld den Cursor setzt, ändert sich die Rahmenfarbe. Das ist übrigens nicht nur ein ästhetischer Aspekt. Tatsächlich hilft das auch den Besuchern beim Ausfüllen des Formulars. So sehen sie immer gleich, in welchem Feld sich der Cursor gerade befindet.
Jetzt folgen einige Angaben zum mehrzeiligen Texteingabefeld.
textarea { width: 430px; overflow: auto; }
Die Breite dieses Feldes wird auf 430 Pixel festgelegt. Etwas merkwürdig erscheint vielleicht auf den ersten Blick die Anweisung
overflow: auto
im Zusammenhang mit mehrzeiligen Eingabefeldern. Diese Zeile ist älteren Versionen des Internet Explorers geschuldet. Tatsächlich hat dieser Browser nämlich auch dann in mehrzeiligen Eingabefeldern Bildlaufleisten angezeigt, wenn das eigentlich nicht nötig war. Durch overflow: auto
lässt sich dieses Schönheitsproblem umgehen.Den Senden-Button gestalten
Momentan kommt die Senden-Schaltfläche noch recht schmucklos daher. Das wird sich nun ändern. Das Ergebnis wird folgendermaßen aussehen:Der Schaltfläche werden verschiedene Eigenschaften zugewiesen.
• Hintergrundfarbe
• Aussehen der Schrift
• Rahmen
• Abstände
input[type="submit"] { background-color: #3399FF; color: #fff; cursor: pointer; font: bold 1em/1.2 Georgia, "Times New Roman ", serif; border: 1px solid #000; padding: 5px 10px; width: auto; }
Erwähnenswert ist hier vielleicht noch die Angabe
input[type="submit"]
. Durch diesen Selektor wird auf input-Elemente zugegriffen, welche die Attribut-Wert-Kombination type="submit"
besitzen.Weitere Teile
- Tutorial: HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.
- Tutorial: HTML & CSS für Einsteiger (Teil 02): Die erste HTML-Seite
- Tutorial: HTML & CSS für Einsteiger (Teil 03): Elemente, Tags und Attribute
- Tutorial: HTML & CSS für Einsteiger (Teil 04): Texte strukturieren
- Tutorial: HTML & CSS für Einsteiger (Teil 05): Texte aufhübschen
- Tutorial: HTML & CSS für Einsteiger (Teil 06): Listen
- Tutorial: HTML & CSS für Einsteiger (Teil 07): Tabellen (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 08): Tabellen (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 09): Grafiken fürs Web (01)
- Tutorial: HTML & CSS für Einsteiger (Teil 10): Grafiken fürs Web (02)
- Tutorial: HTML & CSS für Einsteiger (Teil 11): Hyperlinks definieren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 12): Hyperlinks definieren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 13): Formulare (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 14): Formulare (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 15): Formulare (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 16): Formulare (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 17): Formulare (5)
- Tutorial: HTML & CSS für Einsteiger (Teil 18): Semantik fürs Web (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 19): Semantik fürs Web (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 20): Semantik fürs Web (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 21): Semantik fürs Web (4)
- Tutorial: HTML & CSS für Einsteiger (Teil 22): Multimedia für die Webseite (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 23): Multimedia für die Webseite (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 24): iFrames
- Tutorial: HTML & CSS für Einsteiger (Teil 25): Das ist CSS
- Tutorial: HTML & CSS für Einsteiger (Teil 26): So klappt der Zugriff mit den Selektoren (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 27): So klappt der Zugriff mit den Selektoren (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 28): So klappt der Zugriff mit den Selektoren (3)
- Tutorial: HTML & CSS für Einsteiger (Teil 29): Schöner Text durch CSS (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 30): Schöner Text durch CSS (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 31): Farben und Hintergründe
- Tutorial: HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder
- Tutorial: HTML & CSS für Einsteiger (Teil 33): Den Textfluss kontrollieren
- Tutorial: HTML & CSS für Einsteiger (Teil 34): Rahmen
- Tutorial: HTML & CSS für Einsteiger (Teil 35): Listen und Counter
- Tutorial: HTML & CSS für Einsteiger (Teil 36): Das Boxmodell
- Tutorial: HTML & CSS für Einsteiger (Teil 37): Elemente positionieren
- Tutorial: HTML & CSS für Einsteiger (Teil 38): Alles im Fluss mit float
- Tutorial: HTML & CSS für Einsteiger (Teil 39): Die verschiedenen Layoutvarianten
- Tutorial: HTML & CSS für Einsteiger (Teil 40): Zwei- und dreispaltige Layouts
- Tutorial: HTML & CSS für Einsteiger (Teil 41): Das Layout entwickeln
- Tutorial: HTML & CSS für Einsteiger (Teil 42): Das Layout weiter anpassen
- Tutorial: HTML & CSS für Einsteiger (Teil 43): Das Grundgerüst erstellen
- Tutorial: HTML & CSS für Einsteiger (Teil 44): Den Inhaltsbereich gestalten
- Tutorial: HTML & CSS für Einsteiger (Teil 45): Schicke Schriften für die Seite
- HTML & CSS für Einsteiger (Teil 46): Das Kontaktformular (1)
- Tutorial: HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)
- Tutorial: HTML & CSS für Einsteiger (Teil 48): Die Webseite geht online

Passend zum Inhalt empfehlen wir:
PHP Tutorial – objektorientierte Programmierung: Grundlagen & Praxis
Vielen Dank für das interessante Tutorial
Klasse beschrieben! Herzlichen Dank! :)
Super gemacht - vielen Dank. MfG
Vielen Dank, interessant und informativ
Vielen Dank für das informative Tutorial!
Herzlichen Dank für das Tutorial.
Herzlichen Dank für das Tutorial.
MfG
Vielen Dank für einen weiteren Teil. :-)
Vielen Dank für das weitere sehr interessante Tutorial.
Vielen Dank für das informative Tutorial.
Danke für das Tutorial.
Herzlichen Dank für das Tutorial.
Großen Dank für das Video.
LG Zaina
Direkt noch ne Frage hinterher.
Wann kommt den der zweite Teil? u d werdet Ihr auch die Abscherungsmethoden gegen Spammer, thematisieren?
wäre toll.
Gruß
G_S
danke für das video, das hat ne menge fragen beantwortet und probleme gelößt.
Gruß
G_S
Danke für dein weiteres informatives Videotraining, wie immer sehr lehrreich!
Danke für dein weiteres informatives Videotraining.
Vielen Dank für diesen Teil.
Vielen Dank für das interessante Lehrvideo.
Danke für dein gutes Video.
Mehr anzeigen