Placeholder text provides users with instructions on how they should fill in the fields. A sign-up form with placeholder text is shown in Figure 3.2, on the next page. We’re going to construct that form now.
A Simple Sign-Up Form
AwesomeCo’s support site requires users to sign up for an account, and one of the biggest problems with the sign-ups is that users keep trying to use insecure passwords. Let’s use placeholder text to give the users a little guidance on our password requirements. For consistency’s sake, we’ll add placeholder text to the other fields too.
To add placeholder text, you just add the placeholder attribute to each input field, like this:
<input id= “email” type=”emai1″
name= “emai 1” placeholder “user@example. com”>
Our entire form’s markup looks something like this, with placeholder text for each field:
<form id=”create_account” action=”/signup” method=”post”>
<fieldset id=”signup”>
<legend>Create New Account</legend>
<ol>
<li>
<label for=”first_name”>Fi rst Name</1abel>
<input id =”first_name” type=”text”>
autofocus=”true”
name= “first_name” placeholder ” ‘John ‘ “>
</li>
<li>
<label for=”last_name”>Last Name</1abel>
<input id=”last_name” type=”text”
name= “last_name” placeholder ” ‘Smith ‘ “>
</li>
<li>
<label for=”email “>Emai l</label>
<input id=”email” type=”emai1″
name=”emai1″ placeholder=”user@example.com”>
<1abel for=”password”>Password</label>
<input id=”password” type=”password” name=”password” value=””
autocomplete= “off” placeholder=”8-10 characters” />
<label for=”password_confirmation”>Password Confi rmation</label>
<input id =”password_confirmation” type= “password”
name= “password_confirmation” value= “”
autocomplete=”off” piaceholder=”Type your password again” />
</li>
<lixinput type=”submit” value=”Sign Up”x/li>
</ol>
</fieldset>
</form>
Preventing Autocompletion
You may have noticed we’ve added the autocomplete attribute to the password fields on this form. HTML5 introduces an autocomplete attribute that tells web browsers that they should not attempt to automatically fill in data for the field. Some browsers remember data that users have previously typed in, and in some cases, we want to tell the browsers that we’d rather not let users do that.
Since we’re once again using the ordered list element to hold our form fields, we’ll add a bit of basic CSS to make the form look nicer.
fieldset{
width: 216px;
fieldset ol{
list-style: none;
padding:0;
margin:2px;
}
fieldset ol li{
margin:0 0 9px 0;
padding:0;
}
/* Make inputs go to their own line */
fieldset input{
display:block;
}
Now, users of Safari, Opera, and Chrome will have helpful text inside the form fields. Now let’s make Firefox and Internet Explorer play along.
Falling Back
You can use JavaScript to put placeholder text on form fields without too much work. You test the value of each form field, and if it’s empty, you set its value to the placeholder value. When the form receives focus, you clear out the value, and when the field loses focus, you test the
value again. If it’s different, you leave it alone, and if it’s empty, you replace it with the placeholder text.
You test for placeholder support just like you test for autofocus support.
function hasPlaceholderSupportO {
var i = document.createElement(‘input’) ;
return ‘placeholder’ in i;
Then you just write your JavaScript to handle the changes. We’ll use a solution based on work by Andrew January4 and others to make this work. We’ll fill in the values of all form fields with the text stored in the placeholder attribute. When a user selects a field, we’ll remove the text
we placed in the field. Let’s wrap this up in a jQuery plug-in so that it’s easy to apply the behavior to our form. See the sidebar on page 63 to learn how plug-ins work.
(function«) {
$.fn.placeholder = function(){
function valuelsPlaceholder(input){
return ($(input) .val 0 == SCinput) .attrC’placeholder”)) ;
}
return this.each(functionC) {
SCthis) .findC”: input”) .each(function(){
if($(this).attr(“type”) == “password”){
var new_field = $(“<input type=’text’>”);
new_field .attr(“re7 ” , $(this) .attr(“i’d”)) ;
new_fi eld .attr( “value” , SCthis) .attrC’placeholder”)) ;
SCthis).parentC).appendCnew_field);
new_field.hideC) ;
function showPasswordPIaceHolderCinput){
ifC SCinput) .val C) == “” || valuelsPlaceholderCinput) ){
SCinput) .hideC) ;
$C ‘ input[rel=’ + SCinput) .attrC’i’d”) + ‘J’).showO;
};
};
new_fi eld.focus Cfunction O{
SCthis) .hideC) ;
SC ‘input#’ + SCthis),attrC”re7″)).showC).focusC);
});$(this) .blur(function(){
showPasswordPlaceHolder(this, false);
} ) ;
showPasswordPlaceHolder(this) ;
}el se{
// Replace the value with the placeholder text.
// optional reload parameter solves FF and
// IE caching values on fields,
function showPlaceholder(input, reload){
if( $ (input) ,va”l() == “” | |
( reload && valuelsPlaceholder(input) ) ){
$(input) .val ($(input) .attrÇ”placeholder”)) ;
}
};
$(this).focus(function(){
if($(this).val() == $(this),attr(“placeholder”)){
$(this).val(“”);
};
} ) ;
$(this) .blur(function(){
showPlaceholder($(this) , false)
} ) ;
showPlaceholder(this, true);
};
} ) ;
// Prevent forms from submitting default values
$(this).submit(function(){
$(this) .find(“:input”) .each(function(){
if($(this).val() == $(this),attr(“placeholder”)){
$(this) .val (“”) ;
}
} ) ;
} ) ;
} ) ;
};
}) (jQuery) ;
There are a couple of interesting things in this plug-in that you should know about. On line 45, we’re reloading the placeholder text into the fields if they have no value but also if we’ve refreshed the page. Firefox
jQuery Plug-ins
You can extend jQuery by writing your own plug-ins. You add your own methods on to the jQuery function, and your plug-in seamlessly becomes available to any developer who includes your library. Here’s a really trivial example that displays a JavaScript alert box:
jQuery.fn.debug = functionO {
return this.each(functionO{
alertCthis.html ()) ;
});
If you wanted to see a pop-up box appear for every paragraph on the page, you’d call it like this:
$(“p”) .debugO ;
jQuery plug-ins are designed to iterate over a collection of jQuery objects, and they also return that object collection so that you can chain them. For example, since our debug plugin also returns the jQuery collection, we can use jQuery’s ess method to change the color of the text of these paragraphs, all on one line.
$(“p”) .debugO.css(“co7or”, “red”);
We’ll make use of jQuery plug-ins a few times throughout this book to help us keep our code organized when we create fallback solutions. You can learn more at jQuery’s documentation
site.
and other browsers persist the values of forms. We’re setting the value attribute to the placeholder, and we certainly don’t want that to accidentally become the user’s actual value. When we load the page, we pass true to this method, which you can see on line 61.
Password fields behave a little differently than other form fields, so we have to handle those differently as well. Take a look at line 12. We’re detecting the presence of a password field, and we have to change its type to a regular text field so that the value doesn’t show up masked
with asterisks. Some browsers throw errors if you try to convert password fields, so we’ll have to swap out the password field for a text field. We’ll swap those fields in and out as the user interacts with the fields.
This hack changes the values on the forms, and you probably want to prevent those placeholders from making their way back to the server. Since we’re hacking in this placeholder code only when JavaScript is enabled, we can use JavaScript to inspect the form submission and strip out any values that match the placeholder text. On line 66, we capture the form submission and clear out the values of any input fields that equal the placeholder values.
Now that it’s all written up as a plug-in, we can invoke it on the page by attaching it to the form like this:
$(function(){
function hasPlaceholderSupportO {
var i = document.createElementC ‘input’) ;
return ‘placeholder’ in i;
}
if(! hasPlaceholderSupportO){
$(“#create_account”).placeholder^);
//END placeholder_fallback
$( ‘input[autofocus=true] ‘) .focusO ;
};
Now we have a pretty decent solution that makes placeholder text a viable option for your web apps, no matter what browser you use.