Input Field Placeholder HTML5 Attribute
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.
However, 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
