27. Oktober 2005 in Journal » XHTML/CSS
Formulare mit CSS gestalten
Ausgangspunkt
Um uns nun alle auf der selben Welle zu bewegen, brauchen wir den selben Ausgangspunkt. Ich habe dazu eine Datei mit einem Formular vorbereitet. Wie man im Quelltext sieht, ist das Formular in einem fieldset zusammengefasst. Alle Labels und Eingabefelder sind jeweils in einem Absatz.
Das Formular in Form bringen
Wichtig bei dieser Methode ist das Blockelement fieldset, denn danach richten sich die Eingabefelder. Ausserdem brauchen die Absätze mit den Eingabefeldern eine eigene class.
<p class="input"><input id="name" name="name" type="text" value="" /></p>
Im ersten Schritt versieht man diese Absätze die CSS-Property, die den Inhalt darin rechtsbündig anordet:
p.input{
text-align:right;
}
Damit sich diese Absätze direkt neben den Labels befinden, positioniert man sie relativ mit einem negativen top
p.input{
text-align:right;
top:-22px;
position:relative;
}
Der top-Wert richtet sich hierbei nur an die Schriftgöße, d.h. bei einer größeren Schrift muss dieser Wert auch steigen.
Damit sich das Layout etwas stabilisiert, bekommen die Eingabefelder und das Fieldset nun eine feste Breiten-Angabe.
input, textarea{
background-color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
border:1px solid #cecece;
width:450px;
padding:3px;
}
fieldset{
background:#eee;
border:1px solid #cecece;
width:580px;
padding:10px;
}
Das Ergebnis
Jetzt müssten sich die Eingabefelder direkt neben den Labels befinden und das Formular wirkt nun, wie mit einer Tabelle gestaltet. Versieht man nun noch ein paar zusätzliche CSS-Properties um das Formular noch ein weinig zu verschönern, könnte es dann so aussehen: Gestaltetes Formular.
Diskussion geschlossen
Die Kommentarfunktion dieses Artikels wurde deaktiviert. Private Mitteilungen an Martin bitte per E-Mail an martin@labuschin.com. Danke.
11 Kommentare
Marcel am 27. Oktober 2005 #
Sau geiler Artikel! Super!!
Christof Dorner am 27. Oktober 2005 #
Ist zwar nicht schwer, aber sehr gut beschrieben.
Miriam am 27. Oktober 2005 #
Deine Entwicklung in Sachen Schreibstil is echt unglaublich.. Kompliment! :)
(oder etwa nen ghostwriter engagiert..? ;) )
Markus Stange am 27. Oktober 2005 #
Schöner Artikel. Trotdem habe ich natürlich noch einige Dinge daran auszusetzen ;)
1. Ich würde dem fieldset noch ein legend geben. Ist zwar nicht notwendig, sieht aber vollständiger aus.
2. Die p-Elemente sind meiner Meinung nach fehl am Platz, da es sich ja weder beim label noch bei dem Textfeld um einen ganzen Absatz handelt. Besser wäre es, beide Dinge (label + input) in den selben Absatz (oder Div) zu packen. Diese Container-Elemente komplett wegzulassen ist zwar möglich, aber sehr aufwändig: http://tests.themasta.com/formtable/
3. Normalerweise würde ich hier nicht relative Positionierung einsetzen, aber eigentlich ist es ja schon ganz praktisch, weil man ja dadurch automatisch den Abstand nach unten bekommt. Falls man den nicht haben wil, kann man ja top einfach durch margin-top ersetzen.
4. Wie du ja selbst schreibst, hängt der Wert, der bei top eingesetzt werden muss, von der Schriftgröße ab. Deshalb sollte man auch hier eine Maßeinheit wählen, die von der Schriftgröße abhängt, also die Verschiebung in em angeben. Man hat ja nie Kontrolle über die Schriftgröße, die beim Benutzer eingestellt ist, und deshalb kann es ja schnell passieren, dass das Layout verrutscht, wenn man mit Pixelwerten arbeitet.
Das war's auch schon wieder ;)
Ich finds toll, dass du so viele Beiträge postest, hier gibts ja echt ständig was Neues.
Markus Stange am 27. Oktober 2005 #
Hab ich doch glatt was vergessen: Du solltest den Input-Absätzen noch ein margin-left geben, damit die labels nicht überdeckt werden (und dadurch unklickbar sind).
Martin Labuschin am 27. Oktober 2005 #
Nun ja, erstmal danke für deinen ausführlichen Kommentar. Doch in zwei Sache hast du nicht ganz recht. Der Abstand nach oben durch em ist nicht realisierbar. Dies zeigte sich zumindest in meinen Versuchen. Und ob das label und input sich in einem oder 2 Absätzen befinden ist egal, denn die Frage ob input und label überhaupt einen Absatz bilden ist auch semantisch gesehen fraglich. Doch das Ganze wäre auch mit divs möglich :) Danke für dein Kompliment über den ständig aktualisierten Kontext *freu*
PS. Die Vergößerung um 2 Grad im Firefox lässt das Layout noch übersichtlich aussehen.
Markus Stange am 27. Oktober 2005 #
Der Abstand nach oben durch em ist realisierbar: http://tests.themasta.com/labuform/
Je zwei Absätze zu einem zusammenzufassen schafft meiner Meinung nach mehr Übersicht im Code. Natürlich ist es immer noch fraglich, ob ein Absatz überhaupt angebracht ist, aber dafür habe ich mit dem http://tests.themasta.com/formtable/ auch schon eine Lösung vorgeschlagen.
Martin Labuschin am 27. Oktober 2005 #
Huch, mich wundert es sehr, dass es bei mir nicht geklappt hat. Dann muss ich mich entschuldigen :)
schoebs am 2. November 2005 #
Klasse Artikel, weiter so!
Markus Pfänder am 30. April 2006 #
Hallo,
netter Artikel. Nur wie realisiere ich es, dass meine Submit Buttons nicht auch den Hover-Effekt verpasst bekommen?
Gruss Markus
õóéíÿ ñåðâåð am 10. Januar 2007 #
<a href=" http://ero.3dn.ru/ ">???</a>