Providing Hints with Placeholder Text With Html5

Providing Hints with Placeholder Text With Html5

Placeholder text provides users with instructions on how they should fill in the fields. A sign-up form with placeholder text is shown in Bellow. We’re going to construct that form now Providing Hints with Placeholder Text With Html5.

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= "email"
name= "email"placeholder= "[email protected]" >

Our entire form’s markup looks something like this, with Providing Hints with Placeholder Text With Html5  text for each field:

<form id="create_account" action="/signup" method="post">
 <fieldset id="signup"> <legend>Create New Account</legend>
      <label for="first_name">First Name </label>
      <input id= "first_name" type= "text"
           autofocus= "true"
           name= "first_name" placeholder= "'John'" >
     <label for="last_name">Last Name </label>
     <input id= "last_name" type= "text"
         name= "last_name" placeholder= "'Smith'" >
       <label for="email">Email </label>

Preventing Auto completion  Providing Hints with Placeholder Text With Html5


You may have noticed we’ve added the auto complete attribute to the password fields on this form. HTML5 introduces Providing Hints with Placeholder Text With Html5 attri- bute that tells web browsers that they should not attempt to auto- matically 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  Hints with Placeholder Text With Html5.

        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{

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 Providing Hints with Placeholder Text With Html5

You can use JavaScript to put Providing Hints with Placeholder Text With  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 Providing Hints with Placeholder Text With Html5.

You test for placeholder support just like you test for autofocus support.

function hasPlaceholderSupport() {
 var i = document.createElement('input'); 
return 'placeholder' in i; }

Then you just write your JavaScript to handle the changes. W e ’ l l use a solution based on work by Andrew January 4 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 Providing Hints with Placeholder Text With Html5.


$.fn.placeholder = function(){
 function valueIsPlaceholder(input){ 
 return ($(input).val () == $(input).attr("placeholder" ));
 return this .each(function() {
 10 $(this).find( ":input" ).each(function(){

 if($(this).attr( "type" ) == "password" ){

 var new_field = $( "<input type='text'>");

 new_field.attr( "rel" , $( this).attr( "id" ));
  new_field.attr( "value" , $( this).attr( "placeholder" )); 

 function showPasswordPlaceHolder(input){
 if( $(input).val() == "" || valueIsPlaceholder(input) ){
  $(input).hide(); - $( 'input[rel=' + $(input).attr( "id" ) + ']' ).show();
  }; 25 }; - - new_field.focus(function(){
  $( 'input#' + $( this).attr( "rel" )).show().focus(); 30 });
showPasswordPlaceHolder(this, false); - 
}); 35 

40 // Replace the value with the placeholder text. 
// optional reload parameter solves FF and
 // IE caching values on fields.
 function showPlaceholder(input, reload){ 
if( $(input).val() == "" || 
 ( reload && valueIsPlaceholder(input) ) ){
 $(input).val($(input).attr( "placeholder" )); 

 if($(this).val() == $( this).attr( "placeholder" )){
 $(this).val( "" ); - }; - }); 55 - $(this).blur(function(){
 showPlaceholder($(this), false) 

 showPlaceholder(this, true ); 
 65 // Prevent forms from submitting default values 
 $(this).find( ":input" ).each(function(){ 
 if($(this).val() == $( this).attr( "placeholder" )){ 
 $(this).val( "" ); 
 }); - 
 }); 75 }; 


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
and other browsers persist the values of forms. W e ’ r e setting the value attribute to the placeholder, and we certainly don’t want that to acci- dentally become the user’s actual value. When we load the page, we pass true to this method With Providing Hints with Placeholder Text With Html5

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. W e ’ r e 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 pass- word fields, so we’ll have to swap out the password field for a text field. W e ’ l l swap those fields in and out as the user interacts with the fields Providing Hints with Placeholder Text With Html5.

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 hasPlaceholderSupport() { 
var i = document.createElement( 'input' );
 return 'placeholder' in i;
$( "#create_account" ).placeholder();
 //END placeholder_fallback
$( 'input[autofocus=true]' ).focus();
}; });

Now we have a pretty decent solution that makes Providing Hints with Placeholder Text With Html5  a viable option for your web apps, no matter what browser you use.