Die Gestaltung von Formularen vor CSS3 ist mit der Vergabe diverser Klassen und oftmals mit kleinen JavaScript-Funktionen zum clientseitigen Überprüfen von Eingaben verbunden. Mit CSS3 gibt es einige zusätzliche Pseudo-Klassen, mit denen unterschiedliche Eigenschaften und Zustände von Formularfeldern und -eingaben ohne zusätzliche Klassen und ohne den Einsatz von JavaScript gestaltet werden können.

Neue Eingabetypen und Pseudo-Klassen

Dank vieler neuer Eingabetypen kann bereits clientseitig geprüft werden, ob eine Eingabe valide ist oder nicht. Das macht eine serverseitige Prüfung keinesfalls überflüssig; schließlich sind clientseitige Prüfungen leicht umgehbar. Aber eine Prüfung von Formulareingaben vor dem Absenden ist wesentlich benutzerfreundlicher.

Attribute für spezielle Eingaben in INPUT-Elemente gibt es mittlerweile für diverse Fälle, zum Beispiel für E-Mail-Adressen:

1

<input type="email" />

Wird das E-Mail-Eingabefeld fehlerhaft ausgefüllt – steht dort also keine E-Mail-Adresse –, kann per Pseudo-Klasse „valid“ beziehungsweise „invalid“ das Aussehen gültiger oder ungültiger Eingaben beeinflusst werden. Weder zusätzliche Klassen noch JavaScript sind nötig:

1
2
3
4
5
6
7

input:valid {
  border: green;
}
 
input:invalid {
  border: red;
}

Einziger Nachteil bei dieser Variante: Die Pseudo-Klassen „valid“ und „invalid“ werden bereits beim Laden des Dokumentes angewendet. Ein leeres Formular wird als valide ausgefüllt interpretiert, weshalb alle leeren Eingabefelder als valide gekennzeichnet werden. Hier ist es hilfreich, auf die Klasse „valid“ ganz zu verzichten und nur nicht valide Eingaben per „invalid“ hervorzuheben.

Pflichtfelder definieren und gestalten

Mit HTML5 besteht auch die Möglichkeit, Pflichtfelder zu definieren. Dazu gibt es das Attribut „required“, zu der ein CSS-Äquivalent existiert:

1

<input type="text" required />

Die entsprechende CSS-Auszeichnung für die Gestaltung von Pflichtfeldern sieht so aus:

1
2
3

input:required {
  background-color: yellow;
}

Das Gegenstück zur Pseudo-Klasse „required“ ist „optional“, mit der alle INPUT-Elemente gestaltet werden können, die keine Pflichtfelder sind.

Bei der Auszeichnung von Pflichtfeldern wird oft ein Asterisk hinter die Feldbezeichnung gesetzt. Dieses kann über folgende CSS-Angabe jedem LABEL-Element, dessen INPUT-Element als Pflichtfeld ausgezeichnet ist, angehängt werden:

1
2
3

input:required + label::after {
  content: "*";
}

Schreibgeschützte Eingabefelder gestalten

Für schreibgeschützte Eingabefelder gibt es ebenfalls eigene Pseudo-Klassen, die sich an den entsprechenden HTML-Attributen orientieren:

1

<input type="text" readonly />

Die entsprechende CSS-Angabe sieht so aus:

1
2
3

input:read-only {
  border-color: grey;
}

Ähnlich wie bei der Pseudo-Klasse „required“ existiert auch hier ein Gegenstück. Mit „read-write“ werden alle Eingabefelder angesprochen, bei denen das Attribut „read-only“ nicht gesetzt ist.

Pseudo-Klasse für Zahlenbereiche

Das neue HTML5-Attribut „number“ für INPUT-Elemente erlaubt die Eingabe von Zahlen innerhalb definierter Bereiche:

1

<input type="number" min="1" max="10" />

Das Beispiel akzeptiert Eingaben zwischen eins und zehn. Auch hierfür steht eine eigene Pseudo-Klasse bereit, die immer dann angewendet wird, wenn eine Eingabe entweder innerhalb („in-range“) oder außerhalb („out-of-range“) des Bereiches liegt:

1
2
3

input:in-range {
  border: green;
}

Browserunterstützung

Alle Browser bis auf den Internet Explorer unterstützen die Pseudo-Klassen „valid“/„invalid“ sowie „required“/„optional“. Die Klassen „read-only“/„read-write“ sowie „in-range“/„out-of-range“ sind auf den Einsatz in Chrome, Safari und Opera beschränkt.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)