HTML-Kurs / Eingabehinweise mit placeholder ergänzen

Um einen kurzen Hinweis innerhalb eines leeren HTML-Formularfeldes anzuzeigen, verwenden Sie das Attribut placeholder. Verwenden Sie label für den Feldnamen und value für einen tatsächlichen Anfangswert. Die Trennung von Platzhaltern und Werten verhindert, dass der Beispieltext als Benutzerdaten übermittelt wird.

Der Unterschied zwischen label, placeholder und value

Ein label identifiziert ein Feld, wie „E-Mail“ oder „Nachricht“. Ein placeholder ist ein kleiner Hinweis, der in einem Feld angezeigt wird, wenn dessen Wert leer ist. Das Attribut value auf einem input legt dessen Anfangswert fest.

Zum Beispiel funktioniert „E-Mail“ als Feldbeschriftung, während „z. B. alex@example.com“ als Eingabehinweis dient. Eine Beispieladresse in value in einem leeren Kontaktformular anzugeben, kann den Eindruck einer echten Adresse erwecken, daher verwenden Sie placeholder für dieses Beispiel. Ein Konto-Änderungsformular, das eine gespeicherte Adresse anzeigt, benötigt hingegen einen realen Anfangswert.

Einen Hinweistext zu einem Feld hinzufügen

Fügen Sie placeholder="Ihr Hinweis" in das öffnende Eingabefeld-Tag ein. Dieses Beispiel zeigt eine E-Mail-Adresse als Hinweis, wenn das Feld leer ist.

<label for="email">E-Mail</label>
<input type="email" id="email" name="email"
       placeholder="z. B. alex@example.com">

Ordnen Sie das Attribut for der Beschriftung dem id des Eingabefelds zu, um sie zu verknüpfen. Das name identifiziert das Feld in den übermittelten Daten. Diese Attribute haben unterschiedliche Funktionen: Das Festlegen eines id ersetzt nicht die Notwendigkeit eines name. Siehe label und input richtig verknüpfen für weitere Beispiele.

Der HTML-Standard unterstützt placeholder für diese Eingabetypen: text, search, tel, url, email, password und number. Datumsfelder unterstützen dieses Attribut nicht. Bewahren Sie wichtige Anweisungen außerhalb der Felder auf, auch bei Zahlen, damit sie während der Eingabe sichtbar bleiben. Die Definition HTML von placeholder und die Tabelle der Attribute nach Eingabetyp erklären seinen Anwendungsbereich.

Einen Hinweistext zu einem Textfeld hinzufügen

Das Element textarea, das mehrere Textzeilen akzeptiert, unterstützt auch placeholder. Um nur einen Platzhalter anzuzeigen, lassen Sie den Bereich zwischen seinen Öffnungs- und Schließ-Tags leer. Kombinieren Sie die mehrzeilige Eingabe und einen Auswahlfeld, indem Sie das vollständige Beispiel in textarea, select, option und button verwenden.

<label for="message">Nachricht</label>
<textarea id="message" name="message" rows="4"
          placeholder="z. B. Wann wird meine Bestellung ankommen?"></textarea>

Der Anfangswert eines Textbereichs stammt aus dem Text zwischen seinen Tags und nicht aus einem Attribut von value. Im folgenden Beispiel ist „Bitte sagen Sie mir, wann meine Bestellung ankommt.“ ein tatsächlich bearbeitbarer Wert und kein Platzhalter.

<textarea name="message">Bitte sagen Sie mir, wann meine Bestellung ankommt.</textarea>

Leerzeichen oder Einrückungen zwischen den Tags des Textbereichs können Teil des Werts sein. Wenn ein scheinbar leerer Textbereich seinen Platzhalter nicht anzeigt, überprüfen Sie, ob sich zwischen den Tags noch Resttext befindet. Die Spezifikation des HTML-Textbereichs definiert seinen Anfangswert und das Verhalten des Platzhalters.

Halten Sie wichtige Anweisungen während der Eingabe sichtbar

Ein Hinweistext verschwindet, sobald der Benutzer einen Wert eingibt, daher kann er keinen Feldnamen oder wichtige Anweisungen ersetzen. Bewahren Sie die Namen wie „E-Mail“ in den sichtbaren Labels auf und geben Sie die Anweisungen, die die Benutzer während der Eingabe benötigen, in einem separaten Text an.

<label for="email">E-Mail (erforderlich)</label>
<input type="email" id="email" name="email"
       placeholder="z. B. alex@example.com"
       aria-describedby="email-help" required>
<p id="email-help">Geben Sie die E-Mail-Adresse an, an die Sie eine Antwort erhalten möchten.</p>

Das Zugänglichkeitsattribut aria-describedby verknüpft die Eingabe mit einem zusätzlichen Erklärungstext. Geben Sie als Wert von aria-describedby die id des Erklärungselements an. So können Hilfstechnologien wie Screenreader die Beschreibung dem Feld zuordnen. Behalten Sie auch die sichtbare Erklärung bei, wie in diesem Beispiel. Das W3C-Formularanleitungstutorial zeigt diesen Ansatz.

Vollständiges Beispiel: Pflichtfeld E-Mail und optionaler Hinweis

Speichern Sie den folgenden Code unter dem Namen form-guide.html mit UTF-8-Codierung und öffnen Sie ihn in einem Browser. Das E-Mail-Feld ist Pflicht und die Nachricht ist optional. Die Farbe des Platzhalters ist für einen weißen Hintergrund gewählt, und die Felder passen sich der Breite des Formulars auf kleineren Bildschirmen an. Vergleichen Sie die Pflichtangabe mit den Format- und Bereichsbeschränkungen unter Verwendung der Grenzwerte in Validierung des Formulars mit Pflichtangabe, Länge und Bereichsgrenzen.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Beispiel für Eingabehinweise</title>
  <style>
    body {
      margin: 24px;
      color: #222;
      font-family: sans-serif;
      line-height: 1.6;
    }
    form { max-width: 440px; }
    label { display: block; font-weight: bold; }
    input, textarea {
      box-sizing: border-box;
      width: 100%;
      padding: 10px;
      border: 1px solid #777;
      border-radius: 4px;
      font: inherit;
    }
    input::placeholder, textarea::placeholder {
      color: #666;
      opacity: 1;
    }
    .help { margin-top: 4px; }
    button { padding: 8px 20px; font: inherit; }
  </style>
</head>
<body>
  <h1>Kontaktieren Sie uns</h1>
  <form method="get">
    <p>
      <label for="email">E-Mail (erforderlich)</label>
      <input type="email" id="email" name="email"
             placeholder="z. B. alex@example.com"
             aria-describedby="email-help" required>
    </p>
    <p id="email-help" class="help">Geben Sie die E-Mail-Adresse an, an die Sie eine Antwort erhalten möchten.</p>
    <p>
      <label for="message">Nachricht (optional)</label>
      <textarea id="message" name="message" rows="4"
                placeholder="z. B. Wann wird meine Bestellung ankommen?"></textarea>
    </p>
    <button type="submit">Senden</button>
  </form>
</body>
</html>

Beide Felder zeigen initial Platzhalter an. Sobald Sie eine E-Mail-Adresse eingeben, verschwindet ihr Beispiel, aber „E-Mail (erforderlich)“ und die darunterstehende Erklärung bleiben sichtbar. Löschen Sie das Feld vollständig, und der Platzhaltertext wird wieder angezeigt.

1. Lassen Sie das E-Mail-Feld leer und drücken Sie auf Senden. Die normale Browser-Übermittlung wird durch die Überprüfung required blockiert.
2. Geben Sie abc in das E-Mail-Feld ein und senden Sie erneut. Die Formatprüfung type="email" blockiert die Übermittlung.
3. Geben Sie eine korrekt formatierte Adresse wie alex@example.com ein, und lassen Sie die Nachricht leer. Das Formular kann mit dem optionalen Feld leer gesendet werden.

required prüft einen leeren Wert, und type="email" prüft das E-Mail-Format. Eine korrekt formatierte Adresse ist kein Nachweis dafür, dass die Adresse existiert. Fehlermeldungen und deren Erscheinungsbild variieren je nach Browser und Spracheinstellungen.

Dieses Beispiel enthält keinen Server, der Nachrichten speichert. Da das GET-Formular action weglässt, zielt die normale Übermittlung auf die Adresse des aktuellen Dokuments. Wenn die Datei von einem Webserver bereitgestellt wird, kann die Abfragezeichenfolge ihrer URL die übermittelten Werte anzeigen. Der Umgang mit einer lokal geöffneten Datei kann variieren. Ein funktionierender Dienst erfordert einen Server-Endpunkt und eine geeignete Übermittlungsmethode.

Was wird übermittelt: der Platzhaltertext oder der Wert?

Der Platzhaltertext wird nicht als Eingabewert übermittelt, aber ein leerer Wert kann trotzdem in den übermittelten Daten enthalten sein. Zum Beispiel kann ein nicht deaktiviertes Feld mit name="email" email= bei einer GET-Übermittlung erzeugen, wenn es leer ist und keine Überprüfung für Pflichtfelder die Übermittlung blockiert. Felder ohne name oder mit disabled werden aus den normalen Formulardaten ausgelassen. Diese Unterscheidungen folgen den HTML-Regeln für das Erstellen von Formulardaten .

<form id="compare-form">
  <label for="default-name">Ausgangswert</label>
  <input id="default-name" type="text" name="default_name" value="Alex">
  <label for="hint-name">Hinweisbeispiel</label>
  <input id="hint-name" type="text" name="hint_name" placeholder="z. B. Alex">
</form>

Öffnen Sie diesen Code in einer separaten HTML-Datei und führen Sie dann den folgenden Code in der Entwicklertools-Konsole Ihres Browsers aus. FormData erstellt eine Liste der Formularfeldnamen und ihrer aktuellen Werte. Dieser Code überprüft die Liste, ohne sie an einen Server zu senden.

Array.from(new FormData(document.getElementById("compare-form")).entries())

Wenn beide Felder unverändert bleiben, ist das Ergebnis wie folgt. „Alex“, bereitgestellt über value, wird eingeschlossen. Der Platzhaltertext „z. B. Alex“ wird nicht eingeschlossen.

[["default_name", "Alex"], ["hint_name", ""]]

Geben Sie „Sam“ in das zweite Feld ein und führen Sie den Code erneut aus: der Wert für hint_name wird „Sam“. Wenn der Benutzer das erste Feld ändert, wird sein aktueller Wert anstelle des ursprünglichen Wertes eingeschlossen.

Selbst mit required kann ein vorausgefülltes Feld über value eine einfache Prüfung auf leeren Wert bestehen. Die Erstellung eines FormData-Objekts führt auch nicht zur Validierung der Pflichtfelder. Behandeln Sie die Überprüfungen beim Absenden durch den Browser und den Aufbau der Datenliste als separate Vorgänge und validieren Sie die Eingaben serverseitig in einem echten Dienst.

Wenn der Platzhaltertext fehlt oder schwer lesbar ist

• Überprüfen Sie, ob das Feld bereits einen Wert enthält. Der Anfangswert einer Eingabe, der Inhalt eines Textbereichs, das automatische Ausfüllen durch den Browser oder ein Skript kann verhindern, dass der Platzhaltertext angezeigt wird.
• Überprüfen Sie den Eingabetyp. Für Steuerelemente mit speziellen Oberflächen, wie Datumsfelder, geben Sie Anweisungen außerhalb des Feldes an.
• Halten Sie die Angabe kurz. Geben Sie ein kurzes Beispiel im Feld an und detaillierte Bedingungen in einem sichtbaren erläuternden Text. Setzen Sie keine Zeilenumbrüche in einen Hinweistext.
• Überprüfen Sie die Farben von Text und Hintergrund. Eine sehr blasse Farbe oder geringe Deckkraft kann die Sichtbarkeit des Hinweises erschweren. Überprüfen Sie nach der Anpassung des Stils auch die Lesbarkeit auf einem mobilen Bildschirm.

Verwenden Sie das CSS-Pseudoelement ::placeholder, um den Hinweistext zu gestalten. CSS (Cascading Style Sheets) steuert das Aussehen einer Seite; das vollständige Beispiel verwendet es, um die Farbe und Deckkraft des Hinweises festzulegen. Für weitere Stilbeispiele siehe Gestaltung des Hinweistextes (auf Koreanisch). Verwenden Sie Labels für Feldnamen, Hinweistext für kurze Beispiele und separate Beschreibungen für Anweisungen, die sichtbar bleiben müssen.