Placeholder VS Label for input in HTML5

问题:

I'm Making a form with multiple inputs where I need to give lable of form element inside input itself and I'm using like this

An example

<form class="TTWForm">
<input type="email" name="email" required="required" placeholder="Email Address">     
</form>

And above code is Valid in W3C validator for HTML5.

Does Label not require in HTML 5?

If I'm using HTML5 Placeholder to show label inside input is that ok?

Does label still required along with placeholder to make it screen reader compatible?

回答1:

HTML validators will not check accessibility. Valid HTML can still be inaccessible or less than optimal. Labels are still important and HTML5 placeholder is not a replacement for them. See H44: Using label elements to associate text labels with form controls in the WCAG 2 Techniques. If your layout requires that the label not be visible to sighted users, you can always include the label but move it offscreen with negative margins/text-indent.

Update:

Some test result on placeholder and a discussion on the W3 Public HTML mailing list about using placeholder without label.

回答2:

Placeholder is no replacement for Label so I guess for screen reader this should be present or at least set the title attribute. Ref

For cross browser compatibility you need to use javascript. Checkout http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html for that.