Formulare CSS3

Neben den vielen Formatierungsmöglichkeiten gibt es mit HTML5 und CSS3 zusätzlich die Möglichkeit auf Benutzereingaben zu reagieren. Das Verschicken der Formulare ist jedoch nur mit einer Scriptsprache oder Programmen möglich.

Es gibt einige Generatoren im Netz, die das Gestalten und Erstellen von Formularen vereinfachen Formbuilder

Folgende HTML Elemente kommen in Formularen vor und können mit CSS gestaltet werden.

HTML Elemente für Formulare
HTML Element Bedeutung
<form> gesamtes Formular
<input> Eingabefelder, einzeilige Textfelder, Buttons, Checkboxen
<textarea> mehrzeilige Textfelder
<select> Auswahllisten
<option> einzelene Auswahlfelder in Auswahllisten
<fieldset> Bereiche eines Formulars
<legend> Titel eines fieldsets
<label> Bezeichnung von Formularfeldern

 

input - einzeilige Textfelder

Es gibt seit HTML5 sehr viele verschiedene input Felder. Außerdem sind auch Buttons, die normalerweise gänzlich anders gestaltet werden, input Felder. Um diese unterschiedlichen Elemente anzusprechen, empfiehlt es sich die Möglichkeiten von Selektoren auszuschöpfen.

Mit den CSS3 Möglichkeiten kann mehr ausgefallen Eingabefelder erzeugen.

Beispiel formatierte input Felder

Focus

Ein einfacher aber schöner Effekt ist beim Focus eines Formularfeldes die Hintergrundfarbe zu ändern.

so sieht's aus

input & label

Mit CSS3 kann man die Positionierung des label Elementes bestimmen. Wenn man auf das label Element klickt, wird der der Focus in das dazugehörige input Feld gesetzt. Damit das für den User ersichtlich ist, kann man dem label Element folgende CSS Eigenschaft zuweisen. cursor: pointer;

Ein anderer wichtiger Punkt ist die Positionierung des label Elements

Setzt auf diese Art das label Element auf die linke Seite, sollte man für mehrzeilige Textfelder noch folgende Formatierung vornehmen. vertical-align:top;

so sieht's aus

textarea

Mehrzeilige Textfelder werden in modernen Browsern als skalierbar angzeigt. Man hat jedoch die Mögichkeit mit CSS einzugreifen. resize: none

so sieht's aus

Buttons

Buttons lassen sich mit CSS auf vielfältige Weise gestalten. Man kann Sie mit Hintergrundfarben, Bilder, und abgerundeten Kanten versehen. Auch mit HTML5 hat man die Möglichkeit spezielle Grafikbuttons zu definieren oder einen Bild innerhalb eines Buttons zu referenzieren.

so sieht's aus

weitere Buttons Beispiel 1 | Beispiel 2 | Beispiel 3 | Beispiel 4 |

Einfaches Formular

In den folgenden Beispielen wird ein einfaches Formular Schritt für Schritt mit CSS formatiert.

Beispiel 1 | Beispiel 2 | Beispiel 3 |

Es folgt ein komplexeres Beispiel.

Beispiel 4 | Beispiel 5 | Beispiel 6

Select Listen

Man kann eine Select List mit CSS nicht bis ins letzte stylen. Vor allen Dingen die DropDown List und de ausgewählten Elemente lassen sich nicht einfach mit CSS stylen.

Um die volle Kontrolle zu haben, kann man eine Select nutzen, diese jedoch komplett unsichtbar machen und mit Javascript komplett neu aufbauen mit Div Elementen etc. Dazu gibts bei W3Schools ein Beispiel. oder siehe hier CSS Tricks.

Oder man wählt einfach andere HTML Elemente.

Programmieren mit Select Listen in meinen Javascript Tipps.

 

Beispiel 1