HTML: Placeholder Input Feld


Hast du schon mal ein Textfeld auf einer Website gesehen, in dem steht „Geben Sie hier Ihren Namen ein“ oder „Geben Sie Ihre E-Mail-Adresse ein“?

Das ist ein HTML-Platzhalter. HTML-Platzhalter werden verwendet, um dem Nutzer einen Hinweis darauf zu geben, welche Art von Informationen in ein Feld eingegeben werden sollen. Sie können sehr hilfreich sein, besonders wenn ein Formular lang oder komplex ist.

Beispiel: HTML Platzhalter

So einfach erstellst du einen Platzhalter. Im Inputfeld befindet sich folgender Code : placeholder=“Benutzername“

<form action="/user.php">
  <label for="name">Gebe deinen Namen ein:</label><br><br>
  <input type="text" id="name" name="name" placeholder="Benutzername"

  <input type="submit">
</form> 


Platzhalter können aber auch Probleme verursachen, wenn sie nicht richtig verwendet werden. Zum Beispiel sollten Platzhalter immer beschreibend und benutzerfreundlich sein.

Fazit

Eine gute Faustregel ist, sie kurz und prägnant zu halten. Außerdem sollten Platzhalter nie als Ersatz für Beschriftungen verwendet werden. Beschriftungen sind wichtig, um den Kontext darzustellen und den Nutzern zu helfen, zu verstehen, welche Informationen angefordert werden.

Wenn du also HTML-Platzhalter in deinen Formularen verwendest, achte darauf, dass du sie richtig einsetzt!

Das Platzhalterattribut zeigt dem Benutzer welcher Wert in dem jeweiligen Inputfeld erwartet wird. Ein Kurzer Hinweis wird im Eingabefeld angezeigt, bevor der Benutzer einen Wert eingibt. Hinweis:

Das Platzhalterattribut funktioniert mit den folgenden Eingabetypen: Text, Suche, URL, Tel, E-Mail und Passwort

    html        html placeholder        html platzhalter   

Das könnte dich interessieren!




weitere Beiträge zum Thema HTML


CSS: drop-shadow(): So gehts


HTML: ✉️ Mailto einfügen – So gehts!


CSS in HTML einbinden – So gehts!


HTML: Video einbinden – So gehts


HTML: Neue Zeile einfügen – So gehts!


Was ist PHP? Einfach erklärt


PHP: „Hello World“ schreiben Tutorial


WordPress Video einbinden: So gehst!


WordPress auf PHP 8 umstellen – So gehts!


HTML: !DOCTYPE – Declaration


Welcher Browser unterstützt HTML5?


HTML: Link erstellen – Hyperlink erstellen


WordPress: Backend aufrufen – So gehts


HTML: Blocksatz erstellen – So gehts!


HTML: Javascript in HTML einbinden


HTML: Wort durchstreichen – So gehts!


HTML: Text einrücken – So gehts!


Lorem Ipsum: Bedeutung & Übersetzung


PHP: trim(): Zeichen von beiden Seiten entfernen


PHP: Explode(): Zeichenkette/String zerlegen


Schreibe einen Kommentar