title: clear text field value when mouse click
body: <p>I have three text input fields, like <a href="http://jsfiddle.net/24n7t/1/" rel="nofollow">this on jsfiddle</a>.</p>
  
  <p>I put my code here also:</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text"  value="age" size=30&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt; &lt;input type="text"  value="Name" size=30&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;input type="text"  value="your email" size=30&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>input{color:#CCC;}
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('input').click(function() {
  
              $(this).attr('value', '');
              $(this).css('color','#000');
  
          }
      });
  </code></pre>
  
  <p>I would like the <strong>mouse click</strong> on each field will <strong>clear the default value</strong>, and when user input value, the <strong>text color is black</strong> instead of gray.</p>
  
  <p>What I tried is showing on the jsfiddle link. But it does not work, why?</p>