Genesis, a progressive rock band (source: thisisbossi/flickr)
Adding “hints” inside input elements has recently come into fashion. This is achieved by putting helpful instructions inside input elements that disappear when that element receives focus by the user either clicking in the field, or using the tab key to navigate to the field. I’ve resisted doing this because I found it makes the form “noisy”, and have always preferred using tool tip functionality by using the ‘alt’ tag. Another reason I haven’t used that method is because I’ve never seen an implementation that behaved properly in the absence of JavaScript. This is due to lack of adherence to the principle of “progressive enhancement“. Here, I show how to add these ‘disappearing field hints’ in such as way as to not be obnoxious when browsing without JavaScript.
But who doesn’t use JavaScript in this day and age?
I don’t, sometimes. I use a Firefox extension called “NoScript” that allows only sites that have been whitelisted to execute any JavaScript. If I visit a site that’s new to me (for example, after doing a Google query or following a link from Twitter), it’s done with JavaScript off until I know the site is safe. So other than my paranoid surfing habits, what other scenarios could involve using a browser without JavaScript? Perhaps a screen reader for those with difficulty seeing (although it’s becoming more likely for screen readers to support JavaScript)? Perhaps a mobile browser that has had JavaScript turned off due to bandwidth restrictions? But the question “Who doesn’t use JavaScript” is beside the point. The principle of progressive enhancement stipulate that your site should remain as coherent as possible when JavaScript (and for that matter, CSS) is turned off.
What happens when using hint text without JavaScript
If I visit a site that uses field hints, something like the following happens:
The ZIP code field for accuweather.com when visiting without JavaScript on, and starting to type in my ZIP code
In the example given, I went to AccuWeather, clicked on the ZIP code field and started to enter my ZIP code. However, the “hint” text didn’t disappear, and my ZIP was embedded inside the hint text. In situations like this, I end up needing to manually erase all the hint text and then enter what I wanted to search for. That’s not how it should work. If JavaScript is used to clear the field upon gaining focus, then JavaScript should also be used to populate the hint text. The implementations I’ve looked at appear to set the field’s value attribute manually, meaning that the hint will still appear when JavaScript is off, and will remain there when it gains focus.
My example
I’ll make a very simple example to show how these types of fields should be implemented. My goals are: 1) To degrade gracefully when JavaScript isn’t available, and 2) Make the hint text look different so that the user can tell the difference between what’s a hint and what is user-entered data. Doing this will also help the implementation of removing the hint when it gains focus; I’ll explain later. Here’s my sample form:
My simple, base form for this example
And now, the code to create this very simple form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Field hints</title>
</head>
<body>
<form action="#" method="post">
<fieldset>
<label for="search">Search</label>
<input id="search" name="search" type="text" size="40" maxlength="40" value=""/>
<input id="submit" name="submit" value="Search"/>
</fieldset>
</form>
</body>
</html>
Step 1: Styling the hint
In the AccuWeather example above, the hint text looks exactly the same as user-entered text, so the user cannot distinguish between the hints and the data they entered. Some sites use either a different color or style of font (or both), and I like this approach. So the first step will be to create a class style that can be applied to the search field when it’s displaying a hint. Let’s make the text a light gray and italic. Add the following to your CSS file:
.showhint {
color: #CCCCCC;
font-style: italic;
}
Any field in your form will need to have the class “showhint” assigned to it as a part of the page setup. Do not, under any circumstances, set this class in the HTML. To support progressive enhancement, we need to separate content and actions; let JavaScript take care of setting and unsetting the class for this element.
Make the hint text color dark enough to be read, but light enough to really make it stand out from the rest of the text in your form. When the field gets focus, this style will be removed, and the field will revert back to the standard styles inherited from the form.
Step 2: Adding the jQuery ready handler
I’ll use jQuery in this example, but just about any JavaScript framework will be able to handle this. Code passed to the jQuery’s ready function will be executed once the page has been fully loaded. This code will be responsible for setting the hint style to the search field, as well as setting up the hint:
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#search").attr("class", "showhint");
$("#search").val("Enter search terms here");
});
//]]>
</script>
Note that the first line includes the jQuery script. Without that, all the $() calls would fail. This code will execute only if JavaScript is enabled. If JavaScript is not enabled, the style will remain the same, and the hint text will not be added; all the user will see is a blank search field, which they can start entering search text without needing to manually clearing the field themselves.
Step 3: Handling gaining focus
The rule is that the hint text should disappear when the field gains focus if the hint text is present. That last clause is there to prevent any user-entered data from getting wiped in the event the user clicks on or tabs to the search field again. In other words, just clearing the search field every time it gains focus will not solve the problem. In the example, the hint text is “Enter search terms here”, so on focus, all we need to do is check if the search field’s value is “Enter search terms here”, and clear it if it is, right? Well,consider what would happen if the user was actually searching for “Enter search terms here”. Unlikely yes, but determining if the hint is being displayed based upon the value of the field just isn’t the right thing to do.
Remember earlier when I said that applying a class to the input field will help out with the implementation of removing the hint text? This is where I explain why. Instead of looking at the content of the field, look at the class of the field. If the class is “showhint”, then it’s in “hint mode”, and we should reset the text and class. Create a focus handler for the search field that will look at the field’s class, and if it’s in hint mode, remove the hint text and the class, causing the field to become blank, and inherit the form’s styles:
$("#search").focus(function() {
var className = $("#search").attr("class");
if (className == "showhint") {
$("#search").val("");
$("#search").attr("class", "");
}
});
That basically completes our task. A user with JavaScript will see the hint, and the hint will disappear when the field gains focus. A user without JavaScript will see a blank field. But if we really wanted to get fancy, we could reset the search field back to hint mode if the user didn’t enter anything into the field:
$("#search").blur(function() {
if ($("#search").val().length == 0) {
$("#search").attr("class", "showhint");
$("#search").val("Enter search terms here");
}
});
So if a user tabbed into a field with a hint, then didn’t enter anything before tabbing into the next field, the hint text in field would reappear.
What good will this do if my form submit requires JavaScript?
I’d first reconsider why your form would *need* JavaScript. The most likely reason is validation, but you shouldn’t depend solely on JavaScript validation before taking action on a request; there should be some additional validation going on in the back end (server side) code. But, for whatever reason, you absolutely, positively need JavaScript, note it in an <noscript> block that displays at the top of the page so the user knows you need JavaScript to use the page. Given the above search field example, if JavaScript was required to fire off the search, then perhaps the search HTML should be hidden from those without JavaScript.
Examples
