smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

HTML5 placeholder-Attribut für Input-Felder

5. Juli 2012
Stephan
Vorstellung des HTML5 placeholder-Attributs

Der Einsatz des HTML5 placeholder-Attributs dient der verbesserten Benutzbarkeit von HTML-Formularen. Denn mittels diesem Attribut könnt ihr euren Lesern/Benutzern Hinweise geben, wie ein Formular-Element (input-Feld) auszufüllen ist.

Das placeholder-Attribut eignet sich dafür z.B. bei einem Feld in das die Telefonnummer eingegeben werden soll, darauf hinzuweisen, welches Eingabeformat erwartet wird.

Vorstellung des placeholder-Attributs

Das placeholder-Attribut dient, wie bereits erwähnt, dem Benutzer einen Hinweis anzuzeigen, der aufzeigt, wie das Formular-Feld auszufüllen ist.

Dazu folgendes Zitat:

The placeholder attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format).“ (www.w3schools.com)

Unterstützt wird das Attribut dabei von folgenden input-Typen:

  • text
  • search
  • url
  • tel
  • email
  • password

Dabei kann dem placeholder-Attribut nur reiner Text zugewiesen werden. Dieser Text wird direkt im input-Feld angezeigt, solange dieses leer ist und nicht aktiviert ist.

Sobald das input-Feld den Fokus durch Klick in das input-Feld oder durch Betätigen des Tabs erhält, verschwindet der placeholder-Text. Verliert das input-Feld wieder den Fokus, dann erscheint der angebene placeholder-Text nur dann wieder, wenn das input-Feld immer noch leer ist.

Im Folgenden ein Beispiel für ein Formular, dass das placeholder-Attribut verwendet:

HTML5 placeholder-Attribut in Aktion

Der dazugehörige Code sieht wie folgt aus:

<form action="" method="post">
    <fieldset>
        <legend>Kontakt-Daten</legend>
        <label for="name">Name:</label>
        <input id="name" input="text" placeholder="Tom Mustermann" />
        <label for="email">E-Mail:</label>
        <input id="email" input="email" placeholder="tom@mustermann.de" />
    </fieldset>
</form>

Zur Info: Das placeholder-Attribut ist weder als Ersatz für das label-Attribut noch für lange Beschreibungen gedacht.

Browser-Kompatibilität

Das placeholder-Attribut wird derzeit in allen gängigen Browsern, mit Ausnahme des Internet Explorers unterstützt.

Den aktuellen Stand zu Browser-Kompatibilität findet ihr hier: caniuse.com

Für den Internet Explorer und ältere Browser die keine Unterstützung bieten, kann als Alternative das jQuery-Placholder-Plugin genutzt werden.

Design/Styling

Für das Anpassen des Aussehens des placeholder-Attributs gibt es derzeit noch keinen einheitlichen Standard. Nichstdestotrotz können wir die Textfarbe des placeholder-Texts wie folgt mittels CSS anpassen:

::-webkit-input-placeholder {color:#444;}
:-moz-placeholder {color:#444;}
.placeholder {color:#444;}

Fazit

Das placeholder-Attribut steigert die Benutzbarkeit & -freundlichkeit von HTML-Formularen, in dem es den Benutzern aufzeigt wie ein input-Feld ausgefüllt werden soll bzw. was als Eingabe erwartet wird.

Was haltet ihr vom placeholder-Attribut? Setzt ihr es in euren Webprojekten auch ein?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!