HTML5 Placeholder Text

With HTML5 web forms you have the ability to set placeholder text in an input field without using any JavaScript. Placeholder text is displayed inside the input field as long as the field is empty.

To include placeholder text in your form you just need to add the placeholder attribute to you input field, give that a value (e.g. “WDW Rocks!”) and it will give you the desired result.


<form>
  <input name="s" placeholder="WDW Rocks!">
  <input type="submit" value="Search">
</form>

The above renders this:

If the browser doesn’t support the placeholder attribute, it will be ignored. So start using it today!

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

1 Comment

  1. Um diese Sicherheit und unseren Kundenservice zu gewährleisten, haben wir für Veranstaltungen wie z.B.
    Ich biete an: * Kindergeburtstage von 5- 9 Jahren * Eventgeburtstage ab 10 Jahren für
    Teenager+ Jugendliche * Geburtstage für Erwachsene * außerschulischen Kunstunterricht *
    (Schul-)Klassen Exkursionen * Workshops zum kreativen Gestalten
    und Entspannen * Betriebsausflüge * Weihnachtsfeiern Außerdem biete ich an: *Selbstgestaltete Geschenke,
    z.B. Sollten Sie Interesse an meinen Arbeiten haben oder Informationen bzw.

This post currently has one response. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *

Current day month ye@r *