title: Putting label text over input field
body: <p>I have the following login form:</p>
  
  <pre><code>div.field {
      position: relative;
  }
  label {
     font-size: 14px;
      position: absolute;
      top: 20px;
      left: 3px;
  }​
  
  &lt;div class="username field"&gt;
      &lt;label for="username"&gt;Enter email&lt;/label&gt;&lt;br /&gt;
      &lt;input type="text" class="field" name="email" id="id_email"&gt;
  &lt;/div&gt;
  &lt;div class="password field"&gt;
      &lt;label for="password"&gt;Enter password&lt;/label&gt;&lt;br /&gt;
      &lt;input type="password" class="field" name="password" id="id_password"&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/5yBz5/" rel="nofollow">http://jsfiddle.net/5yBz5/</a></p>
  
  <p>Currently, if a user clicks anywhere where the label text is, nothing will happen (i.e., because the user is clicking on the label text instead of the text input). I want the label text to be in the text input, however, when a user clicks on the text input field, it should ignore the label text.  How would I accomplish this?</p>