Formulare mit CSS gestalten

[Sascha79]

Vorwort

Hallo und herzlich willkommen zu meinem Tutorial "Formulare mit CSS gestalten". Heutzutage ist ja so gut wie auf jeder Website ein Formular zu finden. Ob es sich nun um Forms handelt um eine Suche zu starten oder Kontaktformulare, Gästebücher aber auch Rechenprogramme oder ähnliches. Wichtig beim Erstellen solcher Formulare ist, dass sie den HTML-Richtlinien entsprechen und barrierefrei sind. Dies ist notwendig damit das Formular eben auch von Menschen mit Handicaps, wie z. B. Blinden, ausgefüllt werden kann. Des weiteren erhält der Webdesigner eine bessere Struktur und kann so auch leichter Änderungen vornehmen. Solchen Formularen wollen wir uns hier in diesem Tutorial widmen. CSS-Grundkenntnisse sind natürlich von Vorteil. Ebenfalls wichtig sind gewisse HTML-Kenntnisse, denn auf HTML wird hier nicht näher eingegangen. Wer über diese nicht verfügen sollte, kann die Formulare gerne so verwenden wie sie sind, aber auch bei evtl. Problemen einfach hier im Forum nachfragen.

Wichtig: Der Inhalt des Tutorials befasst sich ausschließlich, wie der Titel schon andeutet, mit der Gestaltung von Formularen. Die von mir hier dargestellten Formulare sind nicht aktiv, d. h. das Programm, das die ausgefüllten Formularfelder entgegen nimmt, muss noch erstellt werden. Für eine solche Verarbeitung benötigt man eine serverseitige Scriptsprache, wie ASP, CGI oder PHP, welche aber nicht Teil dieses Tutorials sind. Das ist schon alleine daher nicht möglich, da ein Formular ganz individuelle Funktionen haben kann, nicht jedes Formular soll den gleichen Zweck erfüllen. Aber keine Sorge: für Abhilfe ist gesorgt. Am Ende des Tutorials findet ihr einige Links die euch Rat geben wie ihr so ein Formular aktiviert und nach euren Wünschen frei weiterverarbeiten könnt. Die von mir hier dargestellten Formulare könnt ihr euch im Anhang als ZIP-Datei herunterladen.

An dieser Stelle auch noch ein recht herzliches Dankeschön an Nico Gutmann für die freundliche Unterstützung.

Und nun wünsche ich euch viel Spaß mit dem Tutorial.


Verschiedene Darstellungen in den Browsern
Es sollte grundsätzlich sehr schwer sein ein Formular in allen Browser gleich darzustellen. Damit soll nicht die Positionierung der einzelnen Elemente gemeint sein, sonder eher wie jeder Browser das Element ansich darstellt. Der Internet Explorer und Firefox stellen die verschiedenen Elemente noch relativ ähnlich dar, Safari tanzt hingegen schon total aus der Reihe. Ich möchte das gleich mal anhand eines Beispiels in der folgenden Figur darstellen.

Figur 1:

In der obigen Figur werden vier unbearbeitete Buttons dargestellt. Der IE stellt den Button noch relativ gleich dar wie der Fuchs. Opera hingegen stellt den Button ohne Rahmen, mit einem von oben kommenden Schein nach innen und einem leichten Schlagschatten dar. Zu Safaris Button muss man eigentlich nicht mehr viel sagen. Wie man nur unschwer erkennen kann, unterscheidet sich dieser total von den anderen. Der selbe Darstellungsunterschied ist auch bei Checkboxen zu erkennen, wobei sich wie zuvor bei den Buttons, IE und FF noch am ähnlichsten sind. Dieses Phänomen beschränkt sich nicht nur auf Buttons und Checkboxen. Lediglich werden alle Elemente eines Formulars unterschiedlich dargestellt. Nach meiner Erfahrung ist es, wie sollte es auch anders sein, der Internet Explorer der bei der Gestaltung von Formularen am meisten Schwierigkeiten bereitet. Ich möchte das mal an einem Fieldset kurz demonstrieren.


Figur 2:

Wie man sieht behandelt der IE das Fieldset anders als der FF. Im Grunde könnte man sagen, das er es schlicht weg falsch darstellt, da die Hintergrundfarbe des Fieldsets über dessen Rahmen hinausschießt.

Man kann z. B. mit Safari, einen rechteckigen, anstatt eines ovalen Button kreieren indem man ihm einen Rahmen gibt, aber dennoch erhält man keine hundertprozentig exakte Darstellung. Auch stellt Safari die Schrift immer ein wenig anders dar. Die Schriftart ist die Selbe, allerdings könnte man meinen das Safari hier font-weight: bold hinzufügt, da die Schrift immer etwas fetter wirkt.

Das Markup von Formularen
Es gibt verschiedene Wege Formulare zu gestalten. Unter anderem sind auch noch sehr oft Formulare die mit Hilfe von Tabellen bearbeitet wurden anzutreffen. Ein Beispiel dafür ist bei selfhtml zu finden. Tabellen sind dazu gedacht tabellarische Daten darzustellen und ein Formular würde ich nicht unbedingt dazuzählen. In diesem Tutorial hingegen werden wir Formulare ohne Tabellen gestalten, da Forms ohne Tabellen wesentlich übersichtlicheren und weniger HTML-Code beinhaltet, mal von Barrierefreiheit ganz zu schweigen.

Nun aber zum ersten Schritt. Um ein Formular einzuleiten braucht man zuerst ein <form></form>-Tag in welches dann als nächstes ein <fieldset></fieldset> platziert wird. Das Element Fieldset hat den Zweck Formularelemente zu gliedern. Man könnte z. B. ein Fieldset mit den persönlichen Daten des Klienten anlegen und ein weiteres mit beispielsweise seinen Bankverbindungen oder ähnliches. Was aber von der Funktion des Forms abhängt, denn nicht jederman benötigt die Bankdaten seines Klienten. Was wäre nun aber eine Aufgliederung wenn man nicht auch Überschriften für die jeweiligen Blöcke deklarieren könnte. Dies geschieht über das Tag <legend></legend>.

Der <fieldset>-Tag ist vergleichbar mit einem Spielfeld im Sport: Es gibt unterschiedliche Spielfelder für unterschiedliche Sportarten. Es gibt Fußballfelder, Tennisfelder, Football-Felder, Hockeyfelder, etc. Diese Felder sehen natürlich unterschiedlich aus, mal komplett unterschiedlich, mal kaum sichtbar. Das Aussehen der Spielfelder sind die einzelnen Formularfelder, das Fieldset ist die Bezeichnung des jeweiligen Spielfeldes und verbindet diese Formularteile miteinander und bringt sie miteinander in direkte Verbindung. Eine große Wiese ist noch lange kein Fußballplatz, man kann dort auch Football spielen, Baseball, evtl. auch Tennis. Ein Tor alleine ist auch nicht direkt mit einer Sportart in Verbindung zu setzen. Bringt man aber eine Wiese und die Tore in direkte Verbindung, weiß jeder: Achja, ein Fußballfeld.

Dies ist vor allem für Menschen mit Sehbehinderungen sehr wichtig, die den HTML-Code mit einer bestimmten Software vorlesen lassen und dadurch eben gleich wissen: Okay, das ist der Bereich, indem ich meine persönliche Daten angeben muss, das ist der Teil für die Bankverbindung, etc. Es macht das Ganze sehr viel übersichtlicher und einfacher, hauptsächlich bei umfangreichen Formularen.

<form>
	<fieldset>
		<legend>Persönliche Daten</legend>
	</fieldset>
	<fieldset>
		<legend>Sonstige Daten</legend>
	</fieldset>
</form>

Das Fieldset unterscheidet sich nun schon um einiges mehr in den Browsern. Auch im FF und IE werden sie recht unterschiedlich dargestellt. Desweiteren werden nun Eingabefelder benötigt, in welche der Klient seine persönlichen Daten eintragen kann. Aus Gründen der Übersicht habe ich mich hier vorerst mal nur für drei Inputfelder und ein Textfeld entschieden. Name, Nachname, E-mail und Nachricht. Was wir aber vor dem Eingabefeld noch brauchen ist ein Label, um das entsprechende Eingabefeld zu etikettieren. Beim Label ist darauf zu achten, dass das for-Attribut den selben Wert erhält, wie die ID des Inputfeldes, was unbedingt notwendig ist, um eine Verbindung zwischen den beiden Elementen herzustellen. Was jetzt noch fehlt ist der Absendebutton, ohne den das ganze keinen Sinn machen würde. Das Formular kann nun beliebig mit Textfeldern oder anderen Inputs erweitert werden.

<form>
	<fieldset>
		<legend>Persönliche Daten</legend>
		
		<label for="vorname">Vorname: </label>
		<input type="text" name="vorname" id="vorname" />
		
		<label for="nachname">Nachname: </label>
		<input type="text" name="nachname" id="nachname" />
		
		<label for="email">E-mail: </label>
		<input type="text" name="email" id="email" />
		
		<label for="nachricht">Nachricht: </label>
		<textarea name="nachricht" id="nachricht" cols="35" rows="8"></textarea>
		
		<label for="submit"></label>
		<input type="submit" name="submit" id="submit" class="button" value="senden" />
		
	</fieldset>
</form>

Was wir nun im Browser sehen, sieht allerdings noch nicht sonderlich schön aus. Deshalb werden wir die einzelnen Elemente des Forms gleich mal mit einem Stylesheet etwas aufpäppeln.
Das Stylesheet könnte dann wie folgt aussehen.

html, body, form, fieldset { margin:0; padding:0; }
	
body {
	background: #fff;
	color: #000;
	font-size: 0.8em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
         
form {
  	width: 430px;
    	padding: 10px 15px 20px 15px;
}     
         
fieldset { 
	width: 320px;
	overflow: auto;
	padding: 10px 50px 20px 50px;
	border: 1px solid #dc7333;
}
		
legend {
	margin-left: -40px;
	color: #dc7333;
	font-size: 1.75em;
	font-weight: bold;
	font-variant: small-caps;
}
		
label { 
	display: block; 
	width: 80px;
	margin: 10px 0 0 0;
}
		
textarea, #vorname, #nachname, #email {
	width: 295px;
}
		
#submit {
	width: 90px;
	margin-top: 10px;
	cursor: pointer;
	border: 1px solid #ddd;
}
	
input:focus, textarea:focus {	
   	background-color: #ffecce;
}

Erklärung
Zu Anfang des CSS werden alle Margins und Paddings der Elemente HTML, Body, Form und Fieldset auf Null gesetzt. Ich nehme mal an das man über das Reseten der Elemente ein Buch schreiben könnte. Es gibt zu viele Theorien und darauf näher einzugehen würde den Umfang dieses Tutorials sprengen. Nach der Theorie von Eric Meyer sollten alle Elemente, außer Formularelemente gelöscht werden. Sein Script, dass er dazu entworfen hat könnt ihr euch hier anschauen. Was im Body passiert sollte klar sein. Für den Typ Label wurde ein display:block deklariert, um für eben diesen eine neue Zeile im Textfluss zu erzwingen. Das bringt mit sich das die Eingabefelder unter den Labels positioniert werden. Deklariert man anstatt den Labels die Inputs mit display:block, so kommt man zu dem Ergebnis, dass die Eingabefelder sich neben den Labels befinden. Bis hierher wurden nur Typselektoren verwendet. Um auf den Sendebutton zuzugreifen wird ihm eine ID zugewiesen um ihn gestalterisch von den restlichen Inputfeldern zu trennen. Ganz am Ende des Scripts ist noch die Pseudoklassen :focus zu finden. Bei :focus handelt es sich um eine Pseudoklasse, die speziell für Formularelemente vorgesehen ist. Ein Element, dass den Focus hat, wird nun farbig hinterlegt sobald sich der Cursor im Element befindet. Das kann für den Klienten, vor allem bei grossen Formularen, eine sehr angenehme Hilfe zur Orientierung sein. Der Focus wird allerdings vom Internet Explorer 6 nicht unterstützt.

An den vorher gegangenen Beispielen wurde ein Formular dargestellt, dass ausschließlich aus Textfeldern besteht. Es ist simpel, leicht erweiterbar und es stehen alle gestalterischen Möglichkeiten offen. Im nächsten Formular dreht es sich um ein ähnliches Beispiel. Aber die Theorie gilt für alle Inputfelder, ob dies nun Textfelder, Checkboxen, Radiobuttons oder Buttons sind und natürlich auch für Selectboxen.


Formularelemente in einer Reihe positionieren
Nun kann es aber auch vorkommen, dass man Formularelemente nebeneinander positionieren will. Um das zu erreichen, werden alle Labels und Inputs, die in einer Reihe stehen sollen in ein Blockelement gepackt. Da macht sich doch ein Paragraph recht gut. Dazu ist noch zu klären, dass <form> und <fieldset> Blockelemente sind und somit einen neuen Absatz erzeugen. Die Elemente <input>, <textarea>, <button> sind Inlineelemente, was bedeutet, das sich diese inline (also in einer Reihe) anordnen und man braucht dies nicht mehr zu deklarieren. Im nächsten Beispiel wird das Mark-up dieser Technik dargestellt.

<form>
  <fieldset>
  
    <legend>Persönliche Daten</legend>
    
	<p class="reihe">
		<label for="name" class="leftLabel">Name: </label>
		<input type="text" id="name" name="name" value="" />
	</p>
	
	<p class="reihe">
		<label for="nachname" class="leftLabel">Nachname: </label>
		<input type="text" id="nachname" name="nachname" value="" />
	</p>  
    
          <p class="reihe">
		<label for="strasse" class="leftLabel">Strasse: </label>
		<input type="text" id="strasse" name="strasse" value="" />
	</p>
	
	<p class="reihe">
		<label for="plz" class="leftLabel">PLZ: </label>
		<input type="text" id="plz" name="plz" value="" />
	
		<label for="ort">Ort: </label>
		<input type="text" id="ort" name="ort" value="" />
	</p>
	
	<p class="reihe">
		<label for="land" class="leftLabel">Land: </label>
		<input type="text" id="land" name="land" value="" />
	</p>
	
	<p class="reihe">
		<label for="submit"></label>
		<input type="submit" name="submit" id="submit" class="button" value="senden" />
	</p>	
			
  </fieldset>
</form>

Der IE stellt das Fieldset anders dar, als die restlichen Browser (wie ja in der obigen Figur schon dargestellt). Das oberste Label und der oberste Input kleben sozusagen oben am Fieldset fest. Das sieht natürlich nicht sehr schön aus. Und genau deshalb wird hier an dieser Stelle ein kleiner Workaround für den IE benötigt. Nichts kompliziertes. Es wird lediglich ein Conditional Comment benötigt in dem wir der Legende einen margin-bottom von 20px zuweisen und schon sieht das ganze auch im IE viel angenehmer aus. Grundsätzlich gibt es immer verschiedene Wege die zum selben Ziel führen. Der Workaround ist nur eine Methode und soll euch nicht daran hindern, eigene Ideen auszuprobieren und etwas rumzutüfteln.

Das Markup enthält sieben Eingabefelder, PLZ und Ort stehen, ohne Formatierung durch CSS schon in einer Reihe, da sie sich im selben Blockelement befinden. Schauen wir uns nun das Sheet dazu an.

html, body, form, fieldset, p { margin:0; padding:0; }

body {
	background: #fff;
	color: #000;
	font-size: 0.8em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
         
form {
	width: 430px;
	padding: 10px 15px 20px 15px;
}  

fieldset {
	width: 370px;
	margin-bottom:10px;
	padding: 20px 30px 20px 30px;
	border: 1px solid #dc7333;
}

legend {
	margin-left: -30px;
	color: #dc7333;
	font-size: 1.75em;
	font-weight: bold;
	font-variant: small-caps;
} 

.reihe {
	width: 360px;
	margin: 5px auto;
	overflow: auto;
}

.leftLabel {
	float: left;
	width: 80px;
	text-align: right;
}

#submit {
	width: 90px;
	margin-top: 10px;
	margin-left: 80px;
	cursor: pointer;
	border: 1px solid #ddd;
} 	

/************************************
 *
 * Text- und Eingabefelder deklarieren
 *
 *************************************/
 
#name, #nachname, #strasse, #land { width: 220px; }
#nummer { width: 44px; }
#plz { width: 35px; }
#ort { width: 142px; }

input:focus {	
    	background-color: #ffecce;
	}

Erklärung
Da die einzelnen Formularelemente nun in Paraphen stehen wird dieser ebenfalls resetet, sonst kann es zu unterschiedlichen Darstellungen kommen. In der Klasse "reihe" ist overflow:auto zu beachten, der den float der Labels cleart. Um die äußeren Labels von den inneren unterscheiden zu können wurden diese einer Klasse (leftLabel) zugewiesen und links gefloatet. Durch den float erreicht man, dass auf das Label (Inlineelement) wieder Höhen- und Breitenangaben anwendbar sind. So kann man den Labels eine feste Breite zuweisen und die daneben liegenden Eingabefelder ordnen sich somit sauber an den Labels an. Über die IDs der Inputfelder werden jetzt noch die entsprechenden Breiten zugeteilt und zu guter letzt folgt, wie auch im vorigen Beispiel, die Pseudoklasse :focus, die auf alle Inputs angewendet wird. Als nächstes aber noch den Workaround für den Internet Explorer, der im Script im <head> nach dem Stylesheet angebracht wird. Vielleicht mag sich nun der Ein oder Andere denken, ich pusche einfach mal padding-top des Fieldset. Man sollte aber nicht vergessen, dass sich der Innenabstand dann nicht nur im IE vergrößert, sondern in den anderen Browsern ein Loch zwischen Fielset und dessen Inhalt reißt.

<!--[if IE]>
	<style type="text/css">
    		legend {margin-bottom: 20px;}
   	 </style>
<![endif]-->

Noch ein paar Tipps zur Gestaltung
- Ihr habt sehr viel gestalterische Freiheit im Bereich der Legende. Aber auch Schriftfarben können und sollten ja auch nach belieben angepasst werden.
- Man kann für die leftLabes z. B. auch text-align: right wählen.
- In allen Beispielen können die Buttons durch eigene Grafiken werden.
- Man könnte nun auch einen Resetbutton platzieren, was aber auch eine Gefahr mit sich bringt.
Der Klient hat nun endlich das ganze Formular ausgefühlt und betätig unabsichtlich den Resetbutton. Ich bin mir nicht sicher ob jeder Klient die Gedult aufbringt das ganze Formular nochmal auszufüllen.

Hinweise im Formular
Wer kennt es nicht: Man hat ein ewig langes Formular endlich ausgefüllt und auf einmal bekommt das ganze Ding mehr Farbe, in den meisten aller Fälle "Rot". So kämpft man sich Stück für Stück durch ein Formular durch und braucht eine halbe Ewigkeit und entsprechend Nerven bis es dann endlich abgesendet wurde. Das Problem liegt hauptsächlich darin, dass Hinweise schlecht platziert sind. Es ist keine gute Idee alle Pflichtfelder mit einem Sternchen oder einem anderen Zeichen zu versehen und erst nach dem Formular die Erklärung für diese zu positionieren. Man sollte sich genau überlegen, wie man dem Klienten am einfachsten und mit wenig Worten oder Zeichen erklärt, wie er das Formular zu nutzen hat. Ich persönlich halte es für sinnvoll, Pflichtfelder einfach mit dem Wort "Pflicht" oder "Pflichtfeld" zu versehen. Das sollte dann jedem einleuchten. Das Selbe gilt z. B. für Datumsangaben, Geburtstage etc. Es ist von Vorteil dem Klienten zu demonstrieren wie er das Feld auszufüllen hat, indem man es mit TT.MM.JJJJ vorbelegt. Es ist gestalterisch oft gar nicht so einfach Hinweise sauber und sinnvoll zu platzieren, aber vor allem bei großen Formularen ein Muss. Wer sich hierbei denkt, das ist alles nicht so wichtig, läuft Gefahr, dass der Klient schnell die Lust verliert sich durch ein schlecht geplantes Formular zu kämpfen und den Vorgang einfach abbricht.

Zum Abschluss...
hoffe ich das euch das Tutorial gefallen hat. Im Anhang findet ihr noch ein Zip das die oben aufgeführten Formulare enthält und darüber hinaus gibt es noch ein etwas grösseres Formular das auch Checkboxen und Radiobuttons sowie Selectboxen enthält. Als Thema dieses Formulars habe ich mir ein Reiseformular gewählt. Aber es steht euch frei zur Verfügung und ihr könnt es auf eure Bedürftinisse anpassen und erweitern. Das Reiseformular wurde dynamisch erstellt und muss somit als PHP-Datei gespeichert werden. Aber nun noch wie versprochen die Links, um euer Formular noch zu aktivieren.

Tutorials um Formulare mit PHP zu verarbeiten:
Formulare verarbeiten mit PHP / MySQL (Teil 1)
Formulare verarbeiten mit PHP / MySQL (Teil 2)
Formulare verarbeiten mit PHP / MySQL (Teil 3)

Formmailer:
Emails mit PHP verschicken

Login-System:
Login-System

Etwas stöbern gefällig?
Tutorials

Fertige Scripts:
Scriptecke

[koenixblau]

Danke!

[zulujaner]

Hier auch schon wieder so ein großes Tutorial.

Gut gemacht Sascha. Schön ausführlich das Ganze und sicher ne prima Erleichterung für manchen User.

Von mir gibts nen gelben Daumen

Grüße zulu

[jayjay]

@sascha, dafür wolltest du wissen wie man die bilder einfügt
gute arbeit!

[hero-master]

Schöne Sache, Sascha
Ich habs mal oben angepinnt!

[Ninnick]

...sehr gut... !

[rakader]

Danke schön - danach habe ich wie ein Irrer gesucht: Label links und Eingabefelder nebeneinander fakultativ nebeneinander positioniert. Klasse - dieses Tutorial ist ein Kleinod!

Herzlich
Rakader