Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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!

Ihr Vorname:

Schauen wir uns den HTML-Code des Attributs an:

<input type="input" 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:

Ihr Vorname:

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; }

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe