HTML-Attribut: placeholder
Das placeholder-Attribut definiert den Text, der in einem Formularsteuerungselement angezeigt wird, wenn das Steuerelement keinen Wert hat. Der Platzhaltertext sollte dem Benutzer einen kurzen Hinweis auf den erwarteten Datentyp geben, der in das Steuerelement eingegeben werden soll.
Effektiver Platzhaltertext besteht aus einem Wort oder einer kurzen Phrase, die auf den erwarteten Datentyp hinweist. Er darf keine Erklärung oder Aufforderung sein. Der Platzhalter darf nicht anstelle eines <label> verwendet werden. Da der Platzhalter nicht sichtbar ist, wenn der Wert des Formularsteuerelements nicht null ist, schadet die Verwendung von placeholder anstelle eines <label>-Elements der Usability und der Barrierefreiheit.
Das placeholder-Attribut wird von den folgenden Eingabetypen unterstützt: text, search, url, tel, email und password. Es wird auch vom <textarea>placeholder-Attribut in der Anwendung, um das erwartete Format eines Eingabefeldes zu erklären.
Hinweis:
Außer bei <textarea>placeholder-Attribut keine Zeilenumbrüche (LF) oder Wagenrückläufe (CR) enthalten. Wenn einer von beiden im Wert enthalten ist, wird der Platzhaltertext abgeschnitten.
Barrierefreiheitsbedenken
Platzhalter sollten nur verwendet werden, um ein Beispiel für den Datentyp zu zeigen, der in einem Formular eingegeben werden soll, und niemals als Ersatz für ein <label>-Element; dies schadet der Barrierefreiheit und der Benutzererfahrung.
Der <label>-Text ist visuell und programmatisch mit seinem entsprechenden Formularsteuerungselement verknüpft. Screenreader geben standardmäßig keinen Platzhalterinhalt bekannt, aber sie geben den Inhalt des Labels bekannt; das Label informiert Benutzer von unterstützenden Technologien, welche Daten in das Steuerelement eingegeben werden sollen. Labels verbessern auch die Benutzererfahrung für Benutzer von Zeigegeräten: Wenn ein Benutzer auf ein <label> klickt, dieses berührt oder antippt, wird der Fokus auf das zugehörige Formularsteuerelement des Labels verschoben.
Platzhalter können nicht als Ersatz für ein Label selbst für diejenigen angesehen werden, die nicht auf unterstützende Technologien angewiesen sind. Platzhaltertext wird in geringerem Farbkontrast als der Standardtext des Formularsteuerelements angezeigt. Dies ist beabsichtigt, da Benutzer nicht verwirrt werden sollen, was Platzhaltertext ist und was ein ausgefülltes Formularfeld ist. Dieser mangelnde Kontrast kann jedoch Probleme für sehbehinderte Benutzer verursachen. Außerdem verschwindet der Platzhaltertext aus Formularfeldern, wenn Benutzer beginnen, Text einzugeben. Wenn der Platzhaltertext Anweisungen oder Beispiele enthält, die verschwinden, kann dies für Benutzer mit kognitiven Problemen verwirrend sein und das Formular unzugänglich machen, wenn der Platzhalter das Label enthielt.
Beispiel
HTML
<form action="/en-US/docs/Web/HTML/Reference/Attributes/placeholder">
<label for="name">Enter your name:</label>
<input type="text" id="name" name="name" placeholder="e.g. Mike Shinoda" />
<button type="submit">Submit</button>
</form>
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # attr-input-placeholder |
| HTML # attr-textarea-placeholder |
Browser-Kompatibilität
html.elements.input.placeholder
html.elements.textarea.placeholder
Siehe auch
- HTML
title - CSS
:placeholder-shownPseudo-Klassen-Selektor - CSS
::placeholderPseudo-Element-Selektor