stereoscott/stereolabels

stereolabels crawls the DOM for labels with the specified class name and places the label text inside the input field.

stereolabels

stereolabels crawls the DOM for labels with the specified class name (default is 'inside') and places the label text inside the input field, and adds the class name to the input element. Upon clicking the field, the label is removed and the class name is removed from the input element. If the field is left blank when it loses focus, the label returns. This behavior is only applied to text, textarea, and password input fields.

sample html:
<form method="post" action="#">
	<p>
		<label for="txtUsername" class="inside">username</label>
		<input type="text" id="txtUsername" name="username" />
	</p>

	<p>
		<label for="txtPassword" class="inside">password</label>
		<input type="password" id="txtPassword" name="password" />
	</p>
	
	<p>
	  <label for="email">the classname 'inside' is required to apply the behavior</label>
	  <input type="text" id="email" name="email" />
	</p>

  <p>
    <label for="body" class="inside">It even works with text areas!</label>
    <textarea id="body"></textarea>
  </p>
  
  <p>
    <label for="radiotest" class="inside">labels for non text inputs stay visible</label>
    <input type="radio" id="radiotest" name="radiotest" value="1" />
    
    <label for="checktest" class="inside">even with the 'inside' class</label>
    <input type="checkbox" id="checktext" name="checktest" value="1" />
  </p>
  
	<input type="submit" id="submit" value="login" />
</form>

sample styles:
input.inside, textarea.inside {
	color:#383;
}



This script is an update on Labels.js by aaron boodman at youngpup.net.