jQuery In Field Label Plugin Made Better Tutorial

View Demo

The original In Field Label Plugin can be found here. There is nothing wrong with it, infact, it's the best one there is. If your using this in conjunction with JS validation, it's the ONLY one that works (trust me, I tried them all!). When I say "works", I mean, the validation script does NOT register a value in the input, because it's really not in the input (only positioned there!).

The only problem is, the original plugin failes when JS is off. The labels stay in the input fields, don't fade/disapear, and you have to type over the top of them. That's not good! So, I fixed/made-better two things about the plugin. One, the labels are positioned via JS so when JS is off they go where you tell them to. Two, I added a little CSS to the :hover/:focus to maintain the effect even when you hover over the label. Just view the source in the demo if you need clarification on anything.

In this order...

Step 1: Download and link to jQuery.

Step 2: Download and link to the jQuery In Field Label plugin.

Step 3: Fire the jQuery In Field Label plugin.

<script type="text/javascript">
/* Fire InFieldLabels */
$(document).ready(function(){
  $("#login label").inFieldLabels();
});
</script>

Step 4: Position the label via JS for degradability.

<script type="text/javascript">
/* position the label via JS for degradability */
document.write('<style>#login label{position:absolute;top:6px;left:6px;cursor:text;}</style>');
</script>

Step 5: jQuery In Field Label CSS.

#login p { /* make label relative to the p */
position:relative;
}
#login label {
display:block; /* positions label above input when JS off */
}
#login input {
margin:0 0 10px;
border:1px solid #999;
padding:8px 4px;
width:300px;
}
#login input:hover, #login input:focus, #login label:hover + input {
border:1px solid #000;
}

Step 6: jQuery In Field Label HTML.

<form id="login" method="post" action="">
   <p><label for="name">Name</label>
   <input type="text" id="name" name="name"></p>
		
   <p><label for="email">Email</label>
   <input type="text" id="email" name="email"></p>
</form>

ADVERTISE HERE