<story><title>Labels in input fields aren’t such a good idea</title><url>http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/</url><text></text></story><parent_chain></parent_chain><comment><author>SeoxyS</author><text>You can have the best of both worlds (quick and dirty):&lt;p&gt;&lt;a href=&quot;http://jsfiddle.net/UMfAy/1/&quot; rel=&quot;nofollow&quot;&gt;http://jsfiddle.net/UMfAy/1/&lt;/a&gt;&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;#60;body&amp;#62;
    &amp;#60;form&amp;#62;
        &amp;#60;div class=&quot;cool-label&quot;&amp;#62;
            &amp;#60;label for=&quot;name&quot;&amp;#62;name&amp;#60;/label&amp;#62;
            &amp;#60;input id=&quot;name&quot; type=&quot;text&quot; placeholder=&quot;John Doe&quot; /&amp;#62;
        &amp;#60;/div&amp;#62;
        &amp;#60;div class=&quot;cool-label&quot;&amp;#62;
            &amp;#60;label for=&quot;email&quot;&amp;#62;email&amp;#60;/label&amp;#62;
            &amp;#60;input id=&quot;email&quot; type=&quot;text&quot; placeholder=&quot;john@doe.com&quot; /&amp;#62;
        &amp;#60;/div&amp;#62;
    &amp;#60;/form&amp;#62;
    &amp;#60;/body&amp;#62;

    body {
        background: #eee;
    }
    
    form {
        width: 250px;
        margin: auto;
        margin-top: 50px;
    }
    
    .cool-label {
        border: 1px dotted rgba(0,0,0,.3);
        background: #fff;
        margin-bottom: 10px;
        width: 100%;
    }
    
    .cool-label label {
        width: 60px;
        display: inline-block;
        text-align: right;
        float: left;
        height: 100%;
        margin-top: 5px;
    }
    
    .cool-label input {
        border: none;
        background: transparent;
        width: 175px; /* 250-70-5 padding */
        padding: 5px;
        padding-left: 70px;
        margin-left: -60px;
    }
    .cool-label input:focus {
        background: rgba(0,130,255,.1);
        outline: none;
    }&lt;/code&gt;&lt;/pre&gt;</text></comment>
<story><title>Labels in input fields aren’t such a good idea</title><url>http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/</url><text></text></story><parent_chain></parent_chain><comment><author>lukifer</author><text>Another reason not to do this: browser autofill. Now and again, the browser will guess wrong on what value to insert, and now the user won&apos;t know what&apos;s supposed to go there. Even if they clear the value, no user will assume that de-focusing the input will reveal the label.</text></comment>