Kommentar- / Kontakt-Formular - HTML Struktur

Um nicht mehr Daten von potentiellen Kommentatoren abzufragen als nötig und um die Gestaltung durch CSS von der Strukturierung der Daten durch entsprechende HTML-Elemente weitestgehend voneinander zu trennen, ist folgender HTML-Code die Grundlage des nun anstehenden CSS Tutorials.

...
<form class="commentForm" action="#" method="post">
  <fieldset>
  <ol class="clearfix">
    <li>
      <label for="firstname">Vorname:</label>
      <input type="text" name="firstname" id=""firstname" value="" />
    </li>
    <li>
      <label for="email">E-Mail: (optional)</label>
      <input type="text" name="email" id="email" value="" />
    </li>
    <li>
      <label for="content">Inhalt:</label>
      <textarea cols="32" rows="7" name="content" id="content">
      ...
      </textarea>>
    </li>
    <li class="last">
      <input type="submit" name="submit" id="submit" value="Absenden" />
    </li>
  </ol>
  </fieldset>
</form>
...

Das Ergebnis dieses Kommentar- bzw. Kontakt-Formulars ohne CSS ist (noch) nicht sonderlich ansehnlich, lässt aber bereits jetzt einen Ausblick zu, auf das was potentielle Kommentatoren erwartet.

Schritt 1 - CSS Form Basics

Einzig und allein für den Formularhintergrund wird für dieses Formular-Layout auf ein Bild zurückgegriffen. Für das Formular und das Fieldset wird ein großes Hintergrundbild geladen, sodass das Formular bspw. in mulitlingualen Context flexibel in der Höhe wäre und problemlos weitere Felder enthalten könnte. Zuerst werden einige Abstände und die Gesamtbreite des Formulars festgelegt. Für die Formularfelder, die in einer geordneten Liste gebettet sind, werden ebenfalls einige Voreinstellungen vorgenommen.

CSS Code

form {
  background: #fff url(comments-bg.png) no-repeat 0 0;
  padding: 3px 0 0;
  margin: 10px auto;
  width: 520px;
}
fieldset {
  background: #fff url(comments-bg.png) no-repeat 0 100%;
  border: none;
  margin: 0;
  padding: 10px 20px 25px;
}
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  padding: 10px;
}
li.last {
  float: none;
  clear: both;
text-align: right;
}

Neben dem Legend-Element, erhalten auch die Labels für die Formularfelder ihre CSS-Angaben - cursor: pointer bewirkt, dass der Mauszeiger beim Überfahren der Labels zur Hand (wie bei Hyperlinks) wird. Da die Labels klickbar sind, wird so auf die "Klickbarkeit" der Texte hingewiesen. Ein Klick auf das Label bewirkt somit, dass der Mauszeiger in das dem Label zugehörige Feld springt.

CSS Code

fieldset legend {
  font-weight: bold;
  font-size: 22px;
  margin:15px 0 0 6px;
}
label {
  display:block;
  cursor: pointer;
  font-weight: bold;
  line-height: 24px;
}

Schritt 2 - input-Felder und textarea

Die Schriftart für Input-Felder und Textareas wird nicht von Elternelementen vererbt, deshalb sollte diese nochmal gesondert zugewiesen werden.

CSS Code

input, textarea {
  background-color: #fff;
  color: #4d4d4d;
  border: 1px solid #c4c4c4;
  font: 13px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
  padding: 8px 12px;
  width: 190px;
}
textarea {
  width: 425px;
  overflow: auto;
}

Wer von Euch dem aktuellen Stand der Dinge, eventuell mittels jQuery ein wenig Bewegung zukommen lassen möchte, der kann mit dem Plugin Sliding Labels einen durchaus sehenswerten Effekt erzeugen.

Schritt 3 - CSS3 für input-fields

Zuerst erhalten die Input-Felder und die Textarea runde Ecken und einen Schatten über die CSS3-Eigenschaft box-shadow. Die CSS3-Eigenschaft box-shadow unterstützt nativ bisher nur Oera ab Version 10.5 - alle anderen modernen Browser brauchen einen Vendor-Prefix (-moz, -webkit). Dem Internet-Explorer kann über die Filter-Funktion auch ein Außenschatten hinzugefügt werden.

CSS Code

input, textarea {
...
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
...
  -webkit-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  -moz-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
...
  filter:progid:DXImageTransform.Microsoft.Shadow
  (color=#e2e2e2, Direction=135, Strength=5);
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow
  (color=#e2e2e2, Direction=135, Strength=5)";
}

Die Eigenschaft box-shadow kann mehrere kommagetrennte Werte annehmen. Die beiden ersten Pixelangaben sind der Versatz in x- und y-Achse – dies können sowohl positive als auch negative Werte sein, der dritte Wert ist der Wert für den Weichzeichner, also der Blur-Wert. Einen vierten Wert könnte man noch für die Schattenausweitung angeben (Beispiel: box-shadow: 2px 2xp 5px 2px #ccc). Schließlich wird noch der Farbwert des Schattens angegeben. Bei Angabe dieser Werte ist der Schatten immer außerhalb (hinter) der Box. Ausgangspunkt ist durch den positiven Versatz so gesehen unten rechts. Mit der zusätzlichen Angabe inset kann man einen Innenschatten erzeugen. Hier ist der Ausgangspunkt oben links. So kann man gleichzeitig einen Schatten innen und außen hinzufügen.

Schritt 4 - Der Submit-Button

Um den Submit-Button anzusprechen nutzen wir den Attribut-Selektor für das input-Feld mit dem Wert type="submit". Diesen Selektor unterstützen alle Browser, lediglich ältere Browserversionen wie der IE6 nicht. Für den Submit-Button wird eine andere Schriftart verwendet. Die Angaben für die Schriftart decken zu 99,5% alle Systeme wie Linux, Mac und PC ab.

CSS Code

input[type="submit"] {
  background-color: #c50a1f;
  color: #fff;
  cursor: pointer;
  font: italic bold 1em/1.2 Georgia, "Times New Roman ", Times, Cambria, "Nimbus Roman No9 L ", serif;
  border: 1px solid #e35061;
  padding: 5px 10px;
  width: auto;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius: 0;
}

Der Submit-Button bekommt eine Hintergrundfarbe und einen dünnen Rand. Wir setzen die Weite des Buttons auf den Wert auto, da sonst die Weite der anderen Input-Felder verwendet werden würde. Ebenfalls muss der Border-Radius auf 0 zurückgesetzt werden.

Schritt 5 - CSS3 Hintergrundverlauf (gradient)

Eine umfangreiche CSS3-Eigenschaft die im folgenden Abschnitt zum Einsatz kommt und oftmals die Ursache für den übertriebenen Einsatz von Hintergrundgrafiken ist, ist der Farbverlauf.

CSS Code

input[type="submit"] {
...
  background: -moz-linear-gradient(top, #e1001a, #c50a1f);
  background: -webkit-gradient(linear, left top, left bottom,
  color-stop(0, #e1001a), color-stop(1, #c50a1f));
...
  filter: progid:DXImageTransform.Microsoft.gradient
  (startColorStr=#e1001a, EndColorStr=#c50a1f);
...
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
  (startColorStr=#e1001a, EndColorStr=#c50a1f)";
}

Schritt 6 - CSS3 Schatten (box-shadow)

Die Photoshop-Vorlage besitzt für den Submit-Button einen leichten "Doppelrahmen", dieser wird über die zuvor schon bereits angewandte CSS3-Eigenschaft box-shadow realisiert. Wir vergeben also mehrere Kommagetrennte Schatten-Werte.

CSS Code

input[type="submit"] {
...
  -webkit-box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
...
  -moz-box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
...
  box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
}

Formular Design mit CSS3 - Visuelle Gestaltung und der Verzicht auf Grafiken

Formular Design mit CSS3 - Durch die Möglichkeiten die einige der Browser-Hersteller mit der Unterstützung von Webstandards wie CSS3 den Anwendern mittlerweile zur Verfügung stellen, sind insbesondere grafisch aufwendige(re) Formulare ohne große Aufwände mittels CSS realisierbar. Vorteil dieser Herangehensweise ist neben der größeren Vielfalt bei der Gestaltung, aber auch die Minimierung von HTTP-Requests durch den reduzierten Einsatz von Grafiken, auf die aufgrund vorhandener CSS3-Eigenschaften verzichtet werden kann. Ausgangspunkt dieses Kommentar-Formulars, welches sich auch im Internet Explorer durchaus sehen lassen kann, ist folgende grafische Vorlage aus Photoshop.

CSS3 Kommentar- / Kontakt-Formular - PSD-Vorlage

Kommentar- / Kontakt-Formular - HTML Struktur

Um nicht mehr Daten von potentiellen Kommentatoren abzufragen als nötig und um die Gestaltung durch CSS von der Strukturierung der Daten durch entsprechende HTML-Elemente weitestgehend voneinander zu trennen, ist folgender HTML-Code die Grundlage des nun anstehenden CSS Tutorials.

Kommentar-Formular
...
<form class="commentForm" action="#" method="post">
  <fieldset>
  <ol class="clearfix">
    <li>
      <label for="firstname">Vorname:</label>
      <input type="text" name="firstname" id=""firstname" value="" />
    </li>
    <li>
      <label for="email">E-Mail: (optional)</label>
      <input type="text" name="email" id="email" value="" />
    </li>
    <li>
      <label for="content">Inhalt:</label>
      <textarea cols="32" rows="7" name="content" id="content">
      ...
      </textarea>>
    </li>
    <li class="last">
      <input type="submit" name="submit" id="submit" value="Absenden" />
    </li>
  </ol>
  </fieldset>
</form>
...


Das Ergebnis dieses Kommentar- bzw. Kontakt-Formulars ohne CSS ist (noch) nicht sonderlich ansehnlich, lässt aber bereits jetzt einen Ausblick zu, auf das was potentielle Kommentatoren erwartet.

CSS3-Formular - Abbildung der Browser basierend auf HTML ohne CSS

Schritt 1 - CSS Form Basics

Einzig und allein für den Formularhintergrund wird für dieses Formular-Layout auf ein Bild zurückgegriffen. Für das Formular und das Fieldset wird ein großes Hintergrundbild geladen, sodass das Formular bspw. in mulitlingualen Context flexibel in der Höhe wäre und problemlos weitere Felder enthalten könnte. Zuerst werden einige Abstände und die Gesamtbreite des Formulars festgelegt. Für die Formularfelder, die in einer geordneten Liste gebettet sind, werden ebenfalls einige Voreinstellungen vorgenommen.

CSS Code
form {
  background: #fff url(comments-bg.png) no-repeat 0 0;
  padding: 3px 0 0;
  margin: 10px auto;
  width: 520px;
}
fieldset {
  background: #fff url(comments-bg.png) no-repeat 0 100%;
  border: none;
  margin: 0;
  padding: 10px 20px 25px;
}
ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  float: left;
  padding: 10px;
}
li.last {
  float: none;
  clear: both;
text-align: right;
}
...


Neben dem Legend-Element, erhalten auch die Labels für die Formularfelder ihre CSS-Angaben - cursor: pointer bewirkt, dass der Mauszeiger beim Überfahren der Labels zur Hand (wie bei Hyperlinks) wird. Da die Labels klickbar sind, wird so auf die "Klickbarkeit" der Texte hingewiesen. Ein Klick auf das Label bewirkt somit, dass der Mauszeiger in das dem Label zugehörige Feld springt.

CSS Code
...
fieldset legend {
  font-weight: bold;
  font-size: 22px;
  margin:15px 0 0 6px;
}
label {
  display:block;
  cursor: pointer;
  font-weight: bold;
  line-height: 24px;
}
...


Schritt 2 - input-Felder und textarea

Die Schriftart für Input-Felder und Textareas wird nicht von Elternelementen vererbt, deshalb sollte diese nochmal gesondert zugewiesen werden.

CSS Code
...
input, textarea {
  background-color: #fff;
  color: #4d4d4d;
  border: 1px solid #c4c4c4;
  font: 13px Helvetica, Arial, "Nimbus Sans L", FreeSans, sans-serif;
  padding: 8px 12px;
  width: 190px;
}
textarea {
  width: 425px;
  overflow: auto;
}
...


Wer von Euch dem aktuellen Stand der Dinge, eventuell mittels jQuery ein wenig Bewegung zukommen lassen möchte, der kann mit dem Plugin Sliding Labels einen durchaus sehenswerten Effekt erzeugen.

CSS3-Formular - Ansicht nach den "Voreinstellungen" (FF 3.6, Windows Vista)

Schritt 3 - CSS3 für input-fields

Zuerst erhalten die Input-Felder und die Textarea runde Ecken und einen Schatten über die CSS3-Eigenschaft box-shadow. Die CSS3-Eigenschaft box-shadow unterstützt nativ bisher nur Oera ab Version 10.5 - alle anderen modernen Browser brauchen einen Vendor-Prefix (-moz, -webkit). Dem Internet-Explorer kann über die Filter-Funktion auch ein Außenschatten hinzugefügt werden.

CSS Code
...
input, textarea {
...
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
...
  -webkit-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  -moz-box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
  box-shadow: 2px 2px 5px #e2e2e2, inset 2px 2px 5px #e2e2e2;
...
  filter:progid:DXImageTransform.Microsoft.Shadow
  (color=#e2e2e2, Direction=135, Strength=5);
  -ms-filter:"progid:DXImageTransform.Microsoft.Shadow
  (color=#e2e2e2, Direction=135, Strength=5)";
}
...


Die Eigenschaft box-shadow kann mehrere kommagetrennte Werte annehmen. Die beiden ersten Pixelangaben sind der Versatz in x- und y-Achse – dies können sowohl positive als auch negative Werte sein, der dritte Wert ist der Wert für den Weichzeichner, also der Blur-Wert. Einen vierten Wert könnte man noch für die Schattenausweitung angeben (Beispiel: box-shadow: 2px 2xp 5px 2px #ccc). Schließlich wird noch der Farbwert des Schattens angegeben. Bei Angabe dieser Werte ist der Schatten immer außerhalb (hinter) der Box. Ausgangspunkt ist durch den positiven Versatz so gesehen unten rechts. Mit der zusätzlichen Angabe inset kann man einen Innenschatten erzeugen. Hier ist der Ausgangspunkt oben links. So kann man gleichzeitig einen Schatten innen und außen hinzufügen.

CSS3-Formular - Ansicht mit border-radius und box-shadow (FF 3.6, Windows Vista)

Schritt 4 - Der Submit-Button

Um den Submit-Button anzusprechen nutzen wir den Attribut-Selektor für das input-Feld mit dem Wert type="submit". Diesen Selektor unterstützen alle Browser, lediglich ältere Browserversionen wie der IE6 nicht. Für den Submit-Button wird eine andere Schriftart verwendet. Die Angaben für die Schriftart decken zu 99,5% alle Systeme wie Linux, Mac und PC ab.

CSS Code
input[type="submit"] {
  background-color: #c50a1f;
  color: #fff;
  cursor: pointer;
  font: italic bold 1em/1.2 Georgia, "Times New Roman ", Times, Cambria, "Nimbus Roman No9 L ", serif;
  border: 1px solid #e35061;
  padding: 5px 10px;
  width: auto;
  -webkit-border-radius:0;
  -moz-border-radius:0;
  border-radius: 0;
}
...


CSS3-Formular - Submit-Button mit Hintergrundfarbe und anderer Schriftart (FF 3.6, Windows Vista)

Der Submit-Button bekommt eine Hintergrundfarbe und einen dünnen Rand. Wir setzen die Weite des Buttons auf den Wert auto, da sonst die Weite der anderen Input-Felder verwendet werden würde. Ebenfalls muss der Border-Radius auf 0 zurückgesetzt werden.

Schritt 5 - CSS3 Hintergrundverlauf (gradient)

Eine umfangreiche CSS3-Eigenschaft die im folgenden Abschnitt zum Einsatz kommt und oftmals die Ursache für den übertriebenen Einsatz von Hintergrundgrafiken ist, ist der Farbverlauf.

CSS Code
input[type="submit"] {
...
  background: -moz-linear-gradient(top, #e1001a, #c50a1f);
  background: -webkit-gradient(linear, left top, left bottom,
  color-stop(0, #e1001a), color-stop(1, #c50a1f));
...
  filter: progid:DXImageTransform.Microsoft.gradient
  (startColorStr=#e1001a, EndColorStr=#c50a1f);
...
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient
  (startColorStr=#e1001a, EndColorStr=#c50a1f)";
}
...


Schritt 6 - CSS3 Schatten (box-shadow)

Die Photoshop-Vorlage besitzt für den Submit-Button einen leichten "Doppelrahmen", dieser wird über die zuvor schon bereits angewandte CSS3-Eigenschaft box-shadow realisiert. Wir vergeben also mehrere Kommagetrennte Schatten-Werte.

CSS Code
input[type="submit"] {
...
  -webkit-box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
...
  -moz-box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
...
  box-shadow: 1px 0 0 #c50a1f, -1px 0 0 #c50a1f,
  0 1px 0 #c50a1f, 0 -1px 0 #c50a1f, 0 5px 10px -5px #666;
}
...


Die ersten vier kommagetrennten Werte sind jeweils ein leichter, nicht weichgezeichneter Schatten an allen vier Seiten. Der fünfte Wert ist ein leichter "Drop-Shadow" unterhalb des Buttons.

Schritt 7 - CSS3 Text-Schatten (text-shadow)

Abschließend wird dem Absenden-Button noch die CSS3 Eigenschaft text-shadow für mehr Kontrast zugewiesen.

CSS Code

input[type="submit"] {
...
  text-shadow: 1px 1px 3px #333;
}
input[type="submit"]:hover {
  background: #c50a1f;
  text-shadow: none;
}

Für ein interaktiveres Verhalten kann man dem Submit-Button noch einen Hover-Status zukommen lassen. Wenn man dann mit der Maus über den Button fährt, wird die Hintergrundfarbe auf diese Weise rot eingefärbt, ohne Farbverlauf. Zudem wird für die "Aktion" der Text-Shadow entfernt.

Schritt 8 - "Browseroptimierung"

Soweit, so gut. In den modernen Browsern, wie Firefox ab 3.5, Safari ab 4, Chrome ab 4 und Opera ab Version 10.5 sind kaum Unterschiede zu erkennen. Einzig Opera unterstützt keinen Hintergrundverlauf und keinen text-shadow. Aber selbst im Internet Explorer sieht das Formular, bis auf die fehlende CSS3-Unterstützung von border-radius, box-shadow, sowie text-shadow, recht ansehnlich aus. Einzig die Angaben der Breiten bzw. Abstandangaben müssen für den IE7 "nachjustiert" werden:

CSS Code für IE7

*+html legend {margin-left: 0px}
*+html textarea {width: 430px}
*+html li.last {padding: 5px}
*+html input[type="submit"] {width: 100px}