HTML Formulare: Platzhalter-Attribut placeholder

Formularfelder können mit dem HTML5-Attribut placeholder mit einem Text (sprich Platzhalter) für eine Erklärung des gewünschten Inhalts innerhalb des Eingabefeldes „beschriftet“ werden.

Dieser Platzhalter (engl. placeholder) wird so lange angezeigt, solange der Besucher nichts in das Formularfeld eingetragen hat. Auch wenn das Formular mit leeren Feldern abgesendet wird, wird nicht der Inhalt des Platzhalters übertragen!

Schauen wir uns den HTML-Code des Attributs an:

<input type="text" placeholder="Bitte Vornamen eingeben">

Dieses Attribut wurde mit HTML5 eingeführt. Da es ein Attribut ist, betrifft es alte Browser nicht, die es noch nicht kennen. Somit ist der Einsatz vollkommen unproblematisch. Früher wurde eine Platzhalterfunktion mühsam mit JavaScript programmiert (was immer wieder zu Fehlern und Problemen führte).

Attribut „:placeholder“ und CSS

Wie auf alle Elemente in unserem Browser können wir mit CSS auch auf das Attribut :placeholder zugreifen und dieses entsprechend formatieren. Wir wollen in unserem Beispiel anstelle der grauen Textfarbe diese in als roten Text angezeigt bekommen und als Schriftstil „italic“:

Bei dem Attribut :placeholder handelt es sich um eine Pseudoklasse, die in den meistens aktuellen Browsern verfügbar ist. Weil es eine Pseudoklasse darstellt, ist die Schreibweise mit dem Doppelpunkt am Anfang und es wird an das gewünschte CSS-Element angefügt (im folgenden Beispiel an input)

input::placeholder {
  color: red;
  font-style: italic;
}

Wir können mit allen verfügbaren CSS-Anweisungen diesen Text in der Erscheinung verändern. So könnte auch die Schriftgröße verändert werden. Allerdings sollte man den Besucher nicht verwirren, wenn der Platzhalter-Text auf einmal wichtiger erscheint wie die eigentliche Besuchereingabe!

Über CSS Pflichtfelder mit :placeholder-shown hervorheben

Wir können über CSS auf das Attribut zugreifen und darauf reagieren. Wollen wir beispielsweise bei einem nicht ausgefüllten Feld dieses mit einer roten Umrandung darstellen, ist das kein Problem.

Über diese visuelle Möglichkeit können wir den Besucher darauf aufmerksam machen, welche Formularfelder unbedingt ausgefüllt werden müssen. Die Magie kommt über die CSS-Anweisung :placeholder-shown

input{
    padding: 0.5em;
    height: 1.6em;
    outline: none;
    border: 2px solid green;
}

input:placeholder-shown {
    border: 2px solid red;
}

Bei dem Attribut :placeholder-shown handelt es sich um eine Pseudoklasse, die in den meistens aktuellen Browsern verfügbar ist.

Placeholder automatisch ausblenden, wenn in Feld geklickt wird

Für die meisten Nutzer ist es irritierend, wenn der Platzhaltertext weiterhin sichtbar ist, wenn bereits in das Feld geklickt wurde. Daher blenden wir den Text über eine Animation sanft aus und alles ist gut. Einfach einmal in folgendem Feld testen:

Und hier der entsprechende CSS-Code, der dies bewirkt (leider nicht standardisiert):

input::-webkit-input-placeholder { color:silver; transition: color 1s; }
input::-moz-placeholder { color:silver; transition: color 1s }
input:-ms-input-placeholder { color:silver; transition: color 1s}
input:-moz-placeholder { color:silver; transition: color 1s }

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
input:focus:-moz-input-placeholder { color:transparent; }