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 Webmart Formular Generator

Ein Online Generator für alle möglichen CSS Eigenschaften: https://enjoycss.com/

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

Ist ein Eingabefeld ausgewählt, kann man der Pseudoklasse :focus CSS Eigenschaften ändern. Ein input Element kann einen border und eine outline Eigenschaft haben.

so sieht's aus

::placeholder

Mit dem Pseudoelement ::placeholder kann man den Platzhaltertext gestalten, der mit dem placehoder-Attribut zugewiesen wird.

CSS

 input::placeholder{
    font-weight: bold;
    color: grey;
    font-style: italic;
}

HTML

<input type="text" placeholder="bitte eingeben">

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

• label oben
  so sieht's aus Die Positionierung wird durch display:block; erreicht. Hat man auch andere label Elemente beispielsweise für Checkboxen muss man den Selektor etwas genauer definieren.
• label links
  so sieht's aus Die Positionierung in einer Reihe ist Standard, allerdings sollte man hier einen Abstand setzen, indem man das label Element mit display: inline-block auszeichnet und so eine Breite zuweisen kann width: 10em.
  

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

Radiobuttons & Checkboxen

Radiobuttons werden mit <input type="radio"> und Checkboxen mit <input type="checkbox"> erstellt. Sie sind mit einer outline versehen, die man ändern kann.

Desweiteren kann man mit der Pseudoklasse :checked ein ausgewähltes Element ansprechen. Weitere Beispiele unter Pseudoklasse :checked

CSS

        input[type="checkbox"]:checked{
            outline: 2px dotted red;
            width: 20px;
            height: 20px;
        }

Html

<input type="checkbox">

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

Buttongeneratoren im Netz

Bestbuttongenerator 

Buttoncreator

Button Generator

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 |

Hier weitere Step by Step Beispiele

Beispiel 1 | Beispiel 2 | Beispiel 3

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

Formular Selektoren

Einige Attribute und Zustände können mit CSS Selektoren angesprochen werden.

:required , :invalid, :valid
erforderlich, ungültig, gültig

input:hover:required{
background-color: blue;
}
input:focus:invalid{
background: red;
}
input:focus:valid{
background-color: antiquewhite;
}