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:
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:
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.
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:
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.
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.
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.
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.
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.
