Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)

HTML & CSS für Einsteiger (Teil 47): Das Kontaktformular (2)

Das Grundgerüst und die ganz grundlegende Gestaltung des Formulars sind definiert und abgeschlossen. Und tatsächlich kommt das Formular bereits jetzt recht ansprechend daher. Dank CSS3 ist aber noch deutlich mehr drin, wenn es um das optische Aufpeppen des Formulars geht. In diesem Video-Training wird das Formular daher noch ein wenig gestaltet.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Los geht es mit der Senden-Schaltfläche. Der aktuelle CSS-Stand sollte hier folgendermaßen aussehen:

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;
}

Diese Syntax führt zu folgendem Ergebnis:

Bilder



 
Das ist ein ganz normaler Button. Der ist jetzt nicht besonders aufregend gestaltet, erfüllt aber durchaus seinen Zweck. Dennoch soll er etwas aufgepeppt werden. Das Endergebnis wird so aussehen:

Bilder



Zusätzlich gibt es einen Hover-Effekt. Die Schaltfläche wird also ihre Farbe verändern, wenn über sie mit dem Mauszeiger gefahren wird.

Wenn ihr euch die Schaltfläche genauer anseht, werden euch die runden Ecken auffallen. Das ist sicherlich eine der CSS-Neuerungen, auf die Webdesigner lange gewartet haben. Denn "früher" gab es eben diese Möglichkeit nicht. (Ausnahme bildeten natürlich die button-Elemente, bei denen man mit Bildern arbeiten konnte.)

Nun lassen sich runde Ecken also nicht nur auf normale Seitenelemente, sondern eben auch auf Schaltflächen anwenden.

Im CSS3-Arbeitsentwurf gibt es dafür die Eigenschaft border-radius. Mozilla- und WebKit-Browser bieten für eine experimentelle Unterstützung dieser Eigenschaft alternative Schreibweisen.

-moz-border-radius
-webkit-border-radius

Mittlerweile unterstützen allerdings alle modernen Browser die runden Ecken.

Auf diesem Wissen aufbauend, könnte eine border-radius-Definition nun folgendermaßen aussehen:
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
border-radius: 17px;

Noch etwas fällt aber bei genauerer Betrachtung auf. Tatsächlich wurde der Schaltfläche auch noch ein Farbverlauf zugewiesen.

Bilder



 
Auch so etwas lässt sich endlich mit CSS-Bordmitteln umsetzen. Verwendet werden dafür die verschiedenen gradient-Eigenschaften. Diese weist man der background-Eigenschaft als Wert zu. Mittlerweile gibt es übrigens zahlreiche Tools, mit denen man sich die Farbverläufe generieren kann.

Eines davon findet ihr beispielsweise auf der Seite http://www.css3factory.com/linear-gradients/. In der folgenden Syntax wurden also ein Farbverlauf und die bekannten runden Ecken definiert.

Im aktuellen Beispiel stellt sich die Syntax für die Schaltfläche jedenfalls folgendermaßen dar:
input[type="submit"] {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   background: -linear-gradient(top, #3e779d, #65a9d7);
   padding: 10px 20px;
   -webkit-border-radius: 17px;
   -moz-border-radius: 17px;
   border-radius: 17px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 21px;
   font-family: 'Lucida Grande', Helvetica, Arial, Sans-Serif;
   text-decoration: none;
   vertical-align: middle;
   width: auto;
}

Ich hatte bereits angedeutet, dass die Schaltflächen auf das Überfahren mit dem Mauszeiger reagieren sollen. Verwendet wird dafür das bekannte :hover.
#submit:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
}

 
Die Schaltfläche wird noch auf ein weiteres Ereignis reagieren. Eingesetzt wird dafür die Pseudo-Klasse :active. Hierüber kann man darauf reagieren, wenn die Schaltfläche angeklickt wird.
#submit:active {
   border-top-color: #1b435e;
   background: #1b435e;
}

Im aktuellen Beispiel verändern sich beim Anklicken der Schaltfläche die Farbe des oberen Randes und die Hintergrundfarbe der Schaltfläche.


Runde Ecken für die Felder

Die sogenannten runden Ecken lassen sich natürlich nicht nur auf die Schaltfläche anwenden, auch die Eingabefelder kann man damit ausstatten. Das Ergebnis könnte folgendermaßen aussehen:

Bilder



 
Und hier die dazugehörende Syntax:
input[type="text"], input[type="email"], textarea {
   border: 1px solid #bebebe;
   -moz-border-radius: 9px;
   -webkit-border-radius: 9px;
   border-radius: 9px;
}

Die notwendigen Eigenschaften, die man zur Definition solch runder Ecken benötigt, kennt ihr bereits.


Formularvalidierung mittels CSS3

Momentan können die Besucher in die Eingabefelder eingeben, was sie wollen. Eine Überprüfung der eingetragenen Werte findet nicht statt. Das soll sich nun ändern. Die Felder werden auf folgende Kriterien hin überprüft:

• Das Name-Feld muss ausgefüllt werden.
• Das E-Mail-Feld muss eine syntaktisch korrekte E-Mail-Adresse enthalten.
• Das mehrzeilige Eingabefeld muss ebenfalls ausgefüllt worden sein.

Erst wenn diese Kriterien erfüllt sind, kann man das Formular tatsächlich abschicken.

Um ein Feld als Pflichtfeld zu kennzeichnen, weist man ihm das required-Attribut zu. Ein damit gekennzeichnetes Feld muss ausgefüllt werden, darf also nicht leer sein.

Eine entsprechende Anwendung sähe folgendermaßen aus:
<form>
 <input type="text" name="name" id="name" value="" required/>
</form>

 
Hier würde der Browser überprüfen, ob das Feld ausgefüllt wurde. Ist das Feld leer und wird dennoch versucht, das Formular abzusenden, sollte der Browser eine Fehlermeldung ausgeben.

Bilder



 
Noch etwas weiter geht die Sache übrigens bei E-Mail-Feldern. Diesen weist man type="email" und das Attribut required zu. Jetzt muss in das Feld nicht nur ein Wert, sondern tatsächlich eine richtige E-Mail-Adresse eingetragen werden, anderenfalls gibt es ebenfalls eine Fehlermeldung, wenn das Formular abgeschickt wird.

Bilder



 
Insgesamt könnte das Formular nun folgendermaßen aussehen:
<ol>
   <li>
      <label for="name">Name:</label>
      <input type="text" name="name" id="name" value="" required/>
   </li>

   <li>
      <label for="email">E-Mail-Adresse:</label>
      <input type="email" name="email" id="email" value="" required/>
   </li>
   <li>
      <label for="comment">Kommentar:</label>
      <textarea cols="32" rows="7" name="content" id="content" required></textarea>
   </li>
   <li class="button">
      <input type="submit" name="submit" id="submit" value="Absenden" />
   </li>
 </ol>

Gerade in umfangreicheren Formularen kann es natürlich sein, dass es Pflichtfelder, aber auch solche Felder gibt, die nicht unbedingt ausgefüllt werden sollen. In solchen Fällen könnt ihr die Pflichtfelder gesondert kennzeichnen. Der Zugriff auf Pflichtfelder gelingt in CSS über :required.
:required {
   background-color: #ff0000;
}

 
Durch diese Syntax werden die Pflichtfelder mit einer roten Hintergrundfarbe ausgestattet.

Bilder



 
Eine andere Variante, um auf Pflichtfelder aufmerksam zu machen, stellt die folgende Syntax dar:
input:required:focus {
   border: 1px solid red;
   outline: none;
}

Wenn hier versucht wird, das Formular abzuschicken, bekommt das erste Feld einen roten Rahmen und den Fokus, welches nicht ausgefüllt wurde bzw. den Validierungsansprüchen nicht genügt.

Bilder



Füllt ein Anwender dieses Feld dann richtig aus, gibt es aber ein weiteres nicht ausgefülltes Feld, wird dieses nach dem nächsten Senden-Besuch ebenfalls fokussiert und mit einem roten Rahmen ausgestattet.

Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 17:26

Vielen Dank für das interessante Tutorial

Portrait von Monti7
  • 05.06.2015 - 09:19

Vielen herzlichen Dank für das Tut!

Portrait von fe_web
  • 22.04.2015 - 11:00

Danke für diesen weiteren Teil. MfG

Portrait von Kundentest
  • 21.04.2015 - 20:36

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 21.04.2015 - 18:47

Vielen Dank für das Tutorial und einen weiteren Teil. :)

Portrait von renate_C
  • 21.04.2015 - 18:39

Ich danke für den weiteren informativen Teil der Reihe.

Portrait von teste123
  • 21.04.2015 - 18:26

Vielen Dank für das interessante Tutorial.

Portrait von samtron
  • 21.04.2015 - 18:25

Vielen Dank für das interessante Tutorial.
MfG

Portrait von WolfgangDittmer
  • 21.04.2015 - 16:37

Danke für den interessanten und hilfreichen Beitrag.

Portrait von twee
  • 21.04.2015 - 15:22

Danke! wieder etwas gelernt.

Portrait von dlieb
  • 21.04.2015 - 15:14

Vielen Dank für Teil 47.

Portrait von winzling
Portrait von rocking_sid
  • 21.04.2015 - 14:49

Vielen Dank für das sehr informative Tutorial!

Portrait von Caesarion2004
  • 21.04.2015 - 14:10

Vielen Dank für das informative Texttutorial.

Portrait von arko2013
  • 21.04.2015 - 14:08

Vielen Dank für das interessante Tutorial.

Portrait von Schoki
  • 01.04.2015 - 19:42

Vielen Dank für dieses interessante Video

Portrait von ZainaPhoto
  • 28.03.2015 - 20:37

Großen Dank für das Video.

LG Zaina

Portrait von suzana
  • 28.03.2015 - 11:28

Vielen Dank für den weiteren Teil.

Portrait von teste123
  • 28.03.2015 - 11:02

vielen Dank
MfG

Portrait von samtron
  • 28.03.2015 - 11:01

vielen Dank
MfG

x
×
×