Paul-Kroening.de

» Startseite /Tutorials: CSS

Tutorials

XHTML & CSS

Hier gibt es einige Tutorials und Codeschnipsel zu CSS

Formulare mit CSS gestalten (Teil 1)

In diesem Artikel wird ein Formular standardkonform ausgezeichnet (fieldset-, legend- und label-Elemente) und formatiert. Auf Tabellen als Layoutratser wird bewußt verzichtet und ausschließlich CSS zur Anordnung der Formularelemente verwendet.

Inhalt

Ein typischer Aufbau für ein Kontaktfomular

entweder man arbeitet mit Überschriften, also hx-Tags, für die logischen Unterteilungen des Formulars oder mit <fieldset> in Verbindung mit <legend>. In diesem Beispiel kommt die zweite Variante zum Einsatz. In jedem Fall sollte man aber für die Titel der Inputfelder das <label>-Element verwenden. In dieser Anleitung ist das Formular in drei Bereiche unterteilt: Kontaktinformationen, eine Umfrage und Eingabefeld für die Nachricht. Folgende HTML-Struktur gilt es also zu gestalten:

Download this Code: /code/formulare_gestalten_markup.txt

Anordnen der Elemente

Ohne CSS sieht das Formlar nicht sehr schön aus, obwohl die Funktionalität nicht beeinträchtigt ist. Zunächst muss man die Elemente übersichtlicher anordnen. Dafür werden die Input-Elemente und deren Label formatiert:

  1. select{
  2. position: relative;
  3. top: -1.4em;
  4. left: 8em;
  5. display: block;
  6. width: 8em;
  7. border: 1px solid #a5acb2;
  8. }
  10. label{
  11. float: left;
  12. display: block;
  13. width: 8em;
  14. clear: left; /* Umbruch */
  15. margin-top: -1em;
  16. font-weight: bold;
  17. }
  19. input{
  20. position: relative;
  21. top: -1.4em;
  22. left: 8em;
  23. display: block;
  24. border: 1px solid #a5acb2;
  25. padding: 2px;
  26. background: #fff;
  27. }
  28. Download this code: /code/formulare_gestalten_1_1.txt

Um zu erreichen, dass alle Input-Felder untereinander angeordnet werden, bekommen sie die Eigenschaft float:left; in Verbindung mit clear:left; zugewiesen. Jetzt muss man nur noch Input- zu Label- und Select-Elementen relativ positionieren und die Input- sowie Select-Elemente nach rechts verschieben - dann hat man das Gröbste erledigt.

Für das erste Labelelement wird nun eine Klasse eingeführt, die zum Positionieren innerhalb des Fieldsets gebraucht wird, um Platz zum oberen Rand zu schaffen - so kann man auf padding für das Fieldset verzichten, da es im IE damit Probleme gibt (Bug)

  1. label.erstes{
  2. margin-top: 1em; /* Abstand */
  3. }
  4. Download this code: /code/formulare_gestalten_1_2.txt

Die ersten beiden Bereiche des Formular sehen schon ganz manierlich aus. Jedoch könnte man noch die Radiobuttons horizontal zum rechten Rand schieben. Dafür bekommt das Fieldset, in dem die Radiobuttons für die Umfrage verwendet werden, eine extra Klasse. Man kann so gezielt diese Schaltfächen formatieren, etwa das Entfernen der Standardrahmen und - Hintergrund für Input-Felder, da man anfangs schon ganz allgemein die Input-Elemente formatiert hat:

  1. fieldset.radio input{
  2. border: none; /* wichtig */
  3. background: none; /* wichtig */
  4. left: 17.5em;
  5. }
  6. * html fieldset.radio input {
  7. left: 18.5em; /* IE */
  8. }
  9. Download this code: /code/formulare_gestalten_1_3.txt

Nun werden Textfeld und Sendeknopf gestaltet.
Mit Hilfe der Klasse "senden" wird der Sendeknopf transformiert bzw. positioniert. Das Textfeld bekommt ähnliche Eigenschaften und Werte wie schon bei den Inputfeldern zugewiesen, damit alles einheitlich aussieht:

  1. input.senden{
  2. top: -1em;
  3. left: 0;
  4. clear: left; /*wichtig */
  5. width: 19em;
  6. }
  7. textarea{
  8. position: relative;
  9. top: -1.4em;
  10. left: 0;
  11. display: block;
  12. border:1px solid #a5acb2;
  13. padding: 2px;
  14. width: 19em;
  15. height: 15.7em;
  16. }
  17. Download this code: /code/formulare_gestalten_1_4.txt

Mit folgenden kleinen Korrekturen für das Fieldset ist man eigentlich schon fertig:

  1. form{
  2. margin: 2em 0;
  3. display: block;
  4. }
  6. fieldset{
  7. border: 1px solid #000;
  8. display: block;
  9. padding: 1em 2em;
  10. clear: both;
  11. width: 20em; /* wichtig */
  12. margin: 2em 0 0 0;
  13. }
  14. Download this code: /code/formulare_gestalten_1_5.txt

CSS/JS für Usability und Design

Das nun folgende CSS wird zwar nur von modernen Browsern interpretiert, bedeutet aber ein großes Plus für die Handhabung solcher Formulare. Zum Beispiel kann man das aktive Feld hevorheben, an den der User gerade arbeitet oder einfach das Formular an die Farbgebung der Seite anpassen.

Das Prinzip ist ganz einfach - man gibt einfach für die verwendeten Elemente Eigenschaften wie border, background, color, etc an. Mit den Pseudoklassen, wie zum Beispiel :focus kann man auch noch ein paar nützliche Effekte erzielen, die die Handhabung des Formulars erleichtern können. Dies will ich aber hier nicht ausführlich erläutern, das dies CSS-Grundlagen sind.

  1. select:hover,
  2. input:hover,
  3. textarea:hover{
  4. border: 1px solid #999;
  5. color: #31709F;
  6. }
  7. select:focus,
  8. input:focus,
  9. textarea:focus{
  10. background: #DFF1FF;
  11. border: 1px solid #000;
  12. color: #000;
  13. }
  14. html > body fieldset{
  15. background: #f3f3f3; /* vor IE verstecken */
  16. }
  17. Download this code: /code/formulare_gestalten_1_6.txt

Nützlich ist auch ein kleines Javascript, da bei klicken auf das Textfeld den Beschreibungstext (value des Inputelements oder Textfelds) verschwinden lässt. Es wird einfach als Attribut für zum Beispiel das Inputelement notiert.

So funktioniert es: Bei Focus, d.h. wennd er User auf dieses Element klickt, wird dessen Wert auf einen leeren String gesetzt.

<input id="vorname" name="vorname" type="text" value="Vorname" onfocus="this.value=''" />

Konsequenterweise sollte man das Javascript auslagern, damit der Inhalt des Dokuments von seinem Verhalten getrennt bleibt, darauf wurde jedoch in diesem Artikel ausnahmsweise verzichtet.

Ein Beispiel

Hier geht es zum Beispiel

16.07.2005

kommentieren

Wissing schrieb: 28 Oktober, 12:22

Das mit dem “bei onfocus die Eingabe löschen” ist keine gute Idee – wenn der Nutzer z.B. per Tab oder Mausklick eine Angabe korrigieren will, wird diese gelöscht. Besser: vorher prüfen, ob der Standardwert im Feld enthalten ist, oder schon eine Benutzereingabe vorliegt. Daher in js-Funktion auslagern.

fjfhj schrieb: 11 April, 17:41

fj

Guido schrieb: 22 Juni, 11:00

Hallo,

ich setzte mich gerade mit Ihrem Set an CSS auseinander, es funktioniert auch recht gut.

Allerdings werden hidden-input-fields im Firefox als leere Box angezeigt.

Wie kann ich das Unterdrücken?

Die Fieldset/Legend-Kombination funktioniert weder im Safari noch im Firefox (aktuelle Versionen)

Gibt es dazu ein Tip?

Klaus schrieb: 3 November, 20:58

Das ist die Botschaft.

gsdgsd schrieb: 14 Februar, 03:43

gdsg

bjohus schrieb: 31 Oktober, 05:35

Li0WAR syntgkoikgds, [url=http://igqsrmzhvsop.com/]igqsrmzhvsop[/url], [link=http://obpecnaoxvpm.com/]obpecnaoxvpm[/link], http://knwdotzlrdwc.com/

sdsd schrieb: 16 November, 20:05

sdsddsdadsdsadadsd

onflkhyzrym schrieb: 19 März, 08:13

pUrwzS ouhvykmhymjn, [url=http://pvvjdggwmlkw.com/]pvvjdggwmlkw[/url], [link=http://zyorwdysqhxp.com/]zyorwdysqhxp[/link], http://pvviasmujvdl.com/

dkhdir schrieb: 13 Mai, 03:41

HPC7VV nubkhjzzsleg, [url=http://qdhouukgemlp.com/]qdhouukgemlp[/url], [link=http://hvhgdhetiped.com/]hvhgdhetiped[/link], http://ciunyfkcksik.com/

mr.smith schrieb: 2 Juni, 00:39

input[type=hidden] {
z-index: -1;
}

bhtfyv schrieb: 25 Juli, 06:36

B8ELYK yhxnxytijuto, [url=http://ydphhkebgigt.com/]ydphhkebgigt[/url], [link=http://algwtlgzfqyw.com/]algwtlgzfqyw[/link], http://ziuyjjdpbgco.com/

ssfs schrieb: 30 September, 10:58

qwqwr

vgwmgkxf schrieb: 30 September, 22:12

vLNH8r seveeqdxebat, [url=http://gzybnhrhvyzy.com/]gzybnhrhvyzy[/url], [link=http://ktbqbixzdtjx.com/]ktbqbixzdtjx[/link], http://zambohzpooxo.com/

swyckkhmxuc schrieb: 4 Oktober, 16:10

YmokRa jvazwarwnqeu, [url=http://ydzdisgegxbl.com/]ydzdisgegxbl[/url], [link=http://kimzdvlseair.com/]kimzdvlseair[/link], http://doycblkhunik.com/

yeyscfhuerz schrieb: 13 November, 17:51

CdU6W7 qanyuqpvzkqj, [url=http://urmqjuulkrcs.com/]urmqjuulkrcs[/url], [link=http://nwdhkdhiutch.com/]nwdhkdhiutch[/link], http://jbqqdzxqmzbz.com/

hvkfgnazqp schrieb: 14 Januar, 19:37

t6Rpoh mwteaklwczwg, [url=http://qnobtlakrkvr.com/]qnobtlakrkvr[/url], [link=http://cqykuyzyajxn.com/]cqykuyzyajxn[/link], http://vyifvbqvwmbk.com/

nlriegbkz schrieb: 3 März, 07:20

bU2ziV ysrbbumgeseb, [url=http://vremwtutjrfb.com/]vremwtutjrfb[/url], [link=http://nenhkjhnwetw.com/]nenhkjhnwetw[/link], http://jxcssupictwk.com/

Kommentieren