Introduction
This article will take a look at the functionality provided by the Placeholder attribute in HTML5 and also the possible customizations that can be applied to it.
Problem Definition
The requirement is a functionality that is provided in most of the current day websites. Web sites give a helpful pointer text in the text boxes where input is required. Typically the search boxes in most web sites have a gray text hint to enter the search term. When the user clicks on the textbox, the search term vanishes and the user can type in their input, knowing what is expected. This has been done historically using javascript and the onfocus event handlers.
When the element gains focus, a script function runs, to hide the hint text and when the focus is moved out, a script function to display the text again, is executed.
Solution
HTML5 includes a placeholder attribute that allows you to declaratively specify this temporary text. This is typically a short length text. It's a quick and easy solution for functionality that's very widely used.
Do note that the placeholder should not be used to replace labels. Its purpose is to provide additional information that is transient in nature but not a label replacement. The recommendation is to use shorter messages - In case you need to use longer hints/descriptives, you can consider using the title attribute to provide a tooltip instead.
Syntax
<INPUT type=text name=FirstName placeholder="First Name">
<INPUT type=text name=FirstName placeholder="Last Name">
You cannot add other HTML content - just text can be specified within the placeholder. However, you can provide some CSS - the extensions are vendor-specific and are discussed further below in the article.
How does it look?
Here is a view of the sample run in Firefox
Figure 5: Firefox running a page with the html5 input placeholder
When the First Name text box is clicked, note the placeholder text has disappeared.
Figure 5: Firefox running a page with the html5 input placeholder - the placeholder disappears when the control has focus.
Source Code: save as testph.htm
- <!DOCTYPE HTML>
- <INPUT type=text name=firstname placeholder="First name">
- <INPUT
- type=text name=lastname placeholder="Last name">
- <input type=button
- name=submit value="Search"/>
No Support?
Browsers that do not support this attribute will ignore it. If it is critical to provide the placeholder text in all browsers, then do ensure that you check for support on the client version and use an appropriate javascript fallback.
Several toolkits such as MooTools, Dojo etc are available, in case you need to add support in unsupported browsers.
Customizations
The placeholder can contain only text. Other HTML content cannot be added to placeholder elements. However, you can customize the styles for the placeholder. You can specify CSS styles for the placeholder - the only caveat is that the element naming is different for different browsers.
The following sample applies the CSS to safari/chrome and Mozilla.
- ::-webkit-input-placeholder { color:#0f0; }
- input:-moz-placeholder { color:#0f0; }
You can also specify unique styles for individual elements. Typically you would style only the font and the text color for the place holder. Extensive styling other than that, could make it visually garish and distracting to the end-user.
Conclusion
In this article, we took a look at the placeholder attribute in html5 for input elements which provides the very useful, and frequently used functionality of displaying informative text, within the input element, which gets hidden when the user clicks on it. This helps move away from the various scripts and functions used in legacy web pages to provide such functionality, towards a standard way of getting this user-friendly technique onto our client browsers.
Happy Coding!