title: How can I implement Stack Overflow-like watermarks in forms?
body: <p>I remember seeing a tutorial somewhere that talks of how to style your input forms in a more “usable” way.</p>
  
  <p>Essentially, you have a placeholder value and when you enter the input, it hides the hint so to speak.</p>
  
  <p>Now, just to be clear: I don't want the hint (placeholder value text) to disappear on focus, but rather to go lighter when I first start typing something. Good examples:</p>
  
  <ul>
  <li><p>Check out the forms on <a href="http://vark.com/" rel="nofollow noreferrer">Aardvark</a>. This is exactly how I wish to have  my input forms.</p></li>
  <li><p>Our very own Stack Overflow — when you try to ask a question, on clicking inside any input form, it doesn't hide the text right away. You see your cursor as well as the hint. but when you start to type, it hides the hint. (I would prefer having it go to a much lighter shade rather than hiding all together though, like the above Aardvark example.)</p></li>
  </ul>
  
  <p>I remember very clearly reading a tutorial somewhere on the interwebz with this exact requirement, but darn, I forgot to bookmark it.</p>
  
  <p>Any suggestions/links?</p>
  
  <p>[Update: I recently found a jQuery plugin <a href="http://fuelyourcoding.com/scripts/infield/" rel="nofollow noreferrer">In-Field Labels</a> that does exactly what i want. Also, <a href="http://www.viget.com/inspire/a-better-jquery-in-field-label-plugin/" rel="nofollow noreferrer">here's the link</a> to an improvement of the same plugin. ]</p>