Anzeige
Tutorialbeschreibung

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

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!


Ich gehe nachfolgend davon aus, dass ihr eine zusätzliche HTML-Datei anlegt. Ich speichere diese jedenfalls unter dem Namen kontakt.html. Die kontakt.html befindet sich auf derselben Ebene wie die euch bereits hinlänglich bekannte index.html.

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>

 
Das Formular enthält zunächst einmal keine Besonderheiten. Um die Formularfelder herum wurde eine 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.

Bilder



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.

 
Weiter geht es mit der 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.

Bilder



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

Das label-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.

Bilder



 

Die Formularfelder gestalten

Im nächsten Schritt werden die eigentlichen Formularfelder gestaltet. Zunächst einmal werden dazu allgemeine Angaben zu input 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:

Bilder



Der Schaltfläche werden verschiedene Eigenschaften zugewiesen.

• Hintergrundfarbe
• Aussehen der Schrift
• Rahmen
• Abstände

 
Die dazugehörende CSS-Syntax stellt sich folgendermaßen dar:
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


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von matino
  • 12.10.2016 - 17:26

Vielen Dank für das interessante Tutorial

Portrait von Monti7
  • 03.06.2015 - 09:22

Klasse beschrieben! Herzlichen Dank! :)

Portrait von fe_web
  • 19.04.2015 - 19:43

Super gemacht - vielen Dank. MfG

Portrait von Heinz9
  • 19.04.2015 - 17:28

Vielen Dank, interessant und informativ

Portrait von rocking_sid
  • 19.04.2015 - 17:17

Vielen Dank für das informative Tutorial!

Portrait von teste123
  • 19.04.2015 - 16:30

Herzlichen Dank für das Tutorial.

Portrait von samtron
  • 19.04.2015 - 16:30

Herzlichen Dank für das Tutorial.
MfG

Portrait von BOPsWelt
  • 19.04.2015 - 16:08

Vielen Dank für einen weiteren Teil. :-)

Portrait von Caesarion2004
  • 19.04.2015 - 14:46

Vielen Dank für das weitere sehr interessante Tutorial.

Portrait von arko2013
  • 19.04.2015 - 14:38

Vielen Dank für das informative Tutorial.

Portrait von ray2013
  • 19.04.2015 - 13:51

Danke für das Tutorial.

Portrait von Kundentest
  • 19.04.2015 - 13:03

Herzlichen Dank für das Tutorial.

Portrait von ZainaPhoto
  • 28.03.2015 - 20:34

Großen Dank für das Video.

LG Zaina

Portrait von femur
  • 21.03.2015 - 16:51

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

Portrait von femur
  • 21.03.2015 - 16:49

danke für das video, das hat ne menge fragen beantwortet und probleme gelößt.

Gruß
G_S

Portrait von nikita2425
  • 21.03.2015 - 11:36

Danke für dein weiteres informatives Videotraining, wie immer sehr lehrreich!

Portrait von arko2013
  • 21.03.2015 - 11:08

Danke für dein weiteres informatives Videotraining.

Portrait von Domingo
  • 21.03.2015 - 11:06

Vielen Dank für diesen Teil.

Portrait von Luther_Sloan
  • 21.03.2015 - 11:01

Vielen Dank für das interessante Lehrvideo.

Portrait von kopfam
  • 21.03.2015 - 10:33

Danke für dein gutes Video.

x
×
×