CSS/Anwendung und Praxis/Formulare mit CSS gestalten und validieren

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

[Bearbeiten] Allgemeines

[Bearbeiten] Hinweise mit label und placeholder

Labels (engl. Etikett) sind Beschriftungen für input-Elemente.

Beispiel: Labels beschriften Eingabefelder ansehen … frickln …
<form> <label for="bname">Benutzername</label> <input id="bname"> <label for="passwd">Passwort</label> <input id="passwd"> <button type="reset">Eingaben zurücksetzen</button> <button type="submit">Eingaben absenden</button> </form>

Dabei sollten die label-Elemente den entsprechenden input-Elementen zugeordnet werden. Das geschieht, indem jedes label-Element ein for-Attribut erhält, das denselben Wert bekommt, wie das id-Attribut des entsprechenden input-Elements. Jetzt kann man auch auf die Beschriftung des Feldes klicken und der Textcursor landet im passenden Eingabefeld.

Das input-Element kann dabei wie im Beispiel außerhalb des label-Elementes stehen, die Zuordnung erfolgt dabei durch das for-Attribut, oder auch Kind des labels sein. In diesem Fall könnte man auf die Vergabe eines for-Attributs verzichten, die Zuordnung erfolgt dabei implizit über die Struktur des Quelltextes. Dies führt jedoch bei Screenreadern zu Schwierigkeiten.

Empfehlung: Nutzen Sie auch bei einer impliziten Zuordnung der Labels zu den Eingabefeldern for-Attribute.

Eine Möglichkeit, Hinweise zu Eingabefeldern zu geben, sind placeholder-Attribute der input-Elemente. Im Gegensatz zu einem Label, welches die Beschriftung von Eingabefeldern enthält, sind Placeholder (Platzhalter) Hinweise für das korrekte Ausfüllen der Eingabefelder.

Beispiel: placeholder geben Hinweise ansehen … frickln …
<form> <label for="bname">Benutzername</label> <input id="bname" placeholder="Benutzername oder E-Mail-Adresse"> <label for="passwd">Passwort</label> <input id="passwd" placeholder="Ihr Passwort"> <button type="reset">Eingaben zurücksetzen</button> <button type="submit">Eingaben absenden</button> </form>


[Bearbeiten] Pflichtfelder

Während früher JavaScript die Eingabefelder auf Inhalt überprüfte, kann dies heute durch CSS festgelegt werden. required (engl. erforderlich) veranlasst den Browser, eine Fehlermeldung auszugeben und das Formular nicht abzuschicken.

  • Chrome
  • Firefox
  • IE 1010
  • Opera
  • Safari WinWin

Details: caniuse.com

Beispiel: Pflichtangaben ansehen … frickln …
<form> <label for="bname">Benutzername</label> <input id="bname" required> <label for="passwd">Passwort</label> <input type="password" id="passwd" required> <input type="submit" value="anmelden"> </form>
Beachten Sie: Safari zeigt zwar die entsprechende Fehlermeldung an, schickt das Formular aber trotzdem ab.

[Bearbeiten] Validierung der Eingabe

Es ist sinnvoll, Pflichtfelder zu kennzeichen. Häufig geschieht das durch einen Asterisk. In diesem Beispiel ändert sich die Kennzeichnung, sobald die Eingabe valide ist. Durch Verwendung der Pseudoklassen :valid, :invalid können wir die Eingabe überprüfen:

form {
  width: 30em;
  padding-top: 3em;
  position: relative;
}
input {
  margin: 0 0 1em 31%;
  padding: .2em .5em;
  width: 60%;
  background-color: #fffbf0; 
  border: 1px solid #e7c157;  
}
label { 
  text-align: right;
  line-height: 1.5;
  width: 30%;
  position: absolute;
  left: 0;
}
label::after {
  content: ": ";
}
button {
  margin-left: 31%;
}
input:required + label::before {
  position: absolute;
  left: 300%;
  content: "★";
  color: red;
}
input:required:valid + label::before {
  content: "✔";
  color: green;
}
<form> <input id="bname" required><label for="bname">Benutzername</label> <input id="passwd" type="password" required><label for="passwd">Passwort</label> <button type="submit">anmelden</button> </form>
Die Kennzeichnung ( bzw. ) erfolgt durch ::before-Pseudoelemente der label-Elemente, die ::after-Pseudoelemente stellen wie in den anderen Beispielen dieser Seite auch bereits die abschließenden Doppelpunkte dar.

Die Reihenfolge im Markup ist ungewöhnlich, aber notwendig:

  • input kann als inhaltsleeres Element keinen, auch keinen generierten Inhalt erhalten,
  • CSS kann nur vorwärts selektieren

[Bearbeiten] Pflichtangaben mit required und pattern

  • HTML5
  • Android
  • Chrome
  • Firefox
  • IE 10
  • Opera
  • Safari

Details: caniuse.com

Beispiel: Pflichtangaben ansehen … frickln …
<label for="bname">Benutzername</label> <input id="bname" required> <label for="passwd">Passwort</label> <input id="passwd" type="password" required pattern="67kgYx@3rt" title="Das Passwort lautet: "67kgYx@3rt"ohne Anführungszeichen."> <label for="text">Leerzeichen verboten</label> <input id="text" pattern="^\S*$">

Es muss ein Benutzername angegeben werden.

Das Passwort wird vor dem Absenden des Formulars Korrektheit überprüft (pattern = …).

Die Eingabe des letzten Feldes darf kein Leerzeichen enthalten.

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Hilfe
SELFHTML
Diverses
Werkzeuge
Flattr
Soziale Netzwerke