Formulare mit CSS gestalten

Formulare werden auch in puren CSS-Layouts bisher oft per Tabellen layoutet. Doch es ist auch per CSS sehr gut möglich, Formularelemente sinnvoll anzuordnen, wenn man seinen HTML-Code gut strukturiert.

Für dieses Beispiel nehmen wir uns ein einfaches Formular, wie es auf vielen Websites anzufinden ist. Nehmen wir an, es handelt sich um ein Newsletter-Formular mit Eingabefeldern für Name, eMail-Adresse und einer Dropdown-Box zum auswählen, ob man ein- oder eingetragen werden soll.

Doch diese Technik lässt sich auch auf andere Formulare übertragen. Und genau das ist der Vorteil: man hat dieselbe Struktur, dieselben Abstände. Und kann sie jederzeit ändern, in allen Formularen die das Stylesheet benutzen. Man muss nicht in den HTML-Code eingreifen dafür.

Die Struktur

Wenn man bedenkt, was ein Formular wirklich ist, woraus es besteht und nach der Maxime vorgeht, allen unnötigen HTML-Code wegzulassen, landet man bei etwas ähnlichem wie dem hier:

<form id=”beispielform” method=”post” action=””>
  <label for=”name”>Name<label>
<input type=”text” id=”Name” name=”Name” />

  <label for=”name”>eMail-Adresse</label>
<input type=”text” id=”email” name=”email” />
 
<label for=”name”>Geburtsmonat</label>
    <option value=”1″>Januar</option>
    <option value=”2″>Februar</option>
</form>

Dies ist der optimale Code. Er besteht lediglich aus den Formularelementen und ihren Bezeichnern. Nicht nur die W3C-Richtlinien zur Barrierefreiheit gebieten das Benutzen von <label>-Tags um die Beschreibungen, deren Benutzung verbessert auch die Struktur des Codes und bietet Vorteile beim Einsatz von CSS.

Gegenüber einer Tabellen-Lösung spart man einiges an Code, was die Seite wieder ein bisschen schneller Laden lässt und die Traffic-Kosten verringert.

Den Formularelementen muss sowohl das name, wie auch das id-Attribut mitgegeben werden. Das erste wird gebraucht, damit überhaupt Werte durch das Formular an den Server übermittelt werden. Das zweite ist notwendig, um die Labels an ihre Formularfelder zu binden (so wird z.B. durch einen Klick auf den Label-Text das Formularfeld ausgewählt). Durch die feste ID können aber auch einzelne Felder später individuell gestaltet werden. Mit Hilfe eines ID-Selektors könnte man z.B. dem eMail-Feld einen roten Hintergrund geben um es hervorzuheben.

Um aber Benutzern nicht CSS-Fähigen Browsern wie z.B. alten Netscape-Versionen oder PDAs nicht heilloses durcheinander zu präsentieren, müssen am Ende einer Formular-Zeile Zeilenumbrüche eingefügt werden. So erhält man sich die Abwärtskompatibilität. Diese

-Tags machen an dieser Stelle aber auch strukturell Sinn (im Gegensatz zu Ihrem Missbrauch als Absatz-Abstandhalter). Ausserdem spielen sie später für das CSS eine wichtige Rolle.

Wichtiger Hinweis:Der Beispiel-HTML-Code hier ist XHTML-Code. Er benutzt die /> Endung bei kurzen Tags um sie abzuschließen. Wenn man diesen Code in einem HTML4-Dokument benutzen will, sollte man diese Schrägstriche entfernen.

Nun zum layouten…
Das wichtigste hier ist es, die mittlere “Linie” herzustellen, an der sich sowohl der Label-Text als auch die Textfelder etc. ausrichten. Das erreicht man nur, indem man diesen Elementen eine feste Breite zuweist. Dies tuen wir im folgenden Beispiel, möglich wird es durch die Benutzung der Eigenschaft

display: block;.
label, input, select { /* Alle Labels UND Formularelemente auswählen */
  display: block;
  float: left;
  width: 100px; /* Breite.*/
}
form br { /* Alle Zeilenumbrüche in Formularen auswählen */
  clear: left; /* das floating der labels und inputs aufheben */
}
input#submit { /* den Submit-Button */
  float: none;
  width: auto;
}

Die letzte Regel ist nötig, damit der Submit-Button nicht auf die gleiche Breite gestreckt wird wie die Textfelder. Die ideale Lösung für diesen Selektor wäre input[type=”submit”], was automatisch alle Submitbuttons auswählt. Der Internet Explorer unterstützt dies jedoch noch nicht, daher muss ein Kompromiss eingegangen werden und dem Button eine eindeutige ID vergeben werden.

Die Abstände wurden in em definiert, damit sie sich in Relation zur Schriftgröße verhalten. Vergrößert man die Schrift, vergrößern sich auch die Abstände entsprechend.

Letzte Schritte

Jetzt wird noch ein wenig Abstand zwischen den Labels und den Feldern eingefügt sowie der Text der Labels rechts ausgerichtet.

label {
 text-align: right;
 padding-right: 1em;
}

Wollen wir das Formular nun noch visuell attraktiver gestalten und es dem Screenshot oben näher bringen, fügen wir noch eine Regel in das Stylesheet ein. Diese ist dann dem eigenen Site-Design anzupassen.

form {
  background: #de2;
  border: thin solid #ab0;
  margin:0;
  padding:.5em;
}

Fazit

Mit der hier vorgestellten Technik sind Tabellen auch für das Layout von Formularen überflüssig. Sie bietet aber auch Abwärtskompatibilität zu nicht-CSS-Browsern, und das ohne den Gewinn an Flexibilität durch den Einsatz von CSS zu schmälern.

Links:

http://www.picment.com/articles/css/funwithforms/

Leave a Reply