Input Field Placeholder HTML5 Attribute

Beacon Blog Article

By Zedric Myers | Published December 9, 2015 | Categories: Web Development

Input Field Placeholder HTML5 Attribute

There are a few ways to create a placeholder for an input field or setup a hint method. One method is to use javascript for a more controlled experience and fallback for older browsers.

input insert boxHowever, if the user doesn’t for any reason have javascript activated, they can use the HTML Attribute “placeholder”.

For HTML5 and compatible browsers, this would be the better solution, overall without the use of javascript on the input field. There are some cases where javascript is needed, but for this setup it’s strictly for giving an input hint.

The placeholder attribute is extremely easy to add to an input field and reduces the use and dependency on javascript. This also works great for field labels.

Example for input hints:

<pre>
<input type="text" name="desc" placeholder="Enter First Name">
</pre>

Browser support for the placeholder attribute, referenced from w3schools.com

  • Chrome 10+
  • IE 10+
  • Firefox 4+
  • Safari 5+
  • Opera 11+

For more information see W3C HTML5 documentation on the placeholder attribute, here.

Recent Posts

Beaconville booth with Kent and Emily
Hello from Beaconville: High Ed Conference Wrap-Up View this Story
Confetti and Balloons
Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far View this Story
Beach scene with Beacon logo
Beacon Technologies Opens Second Location in Carolina Beach, NC View this Story
outline of person sitting at computer and cheering
Why You Need Audience Personas For Your Website Content View this Story

Let's get to work!

Contact Us