Placeholder VS Label for input in HTML5

Question

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

<

Answer 1

In essence it depends on what the goal of your pages is :

Placeholders in Form Fields Are Harmful

i would prefer 'can be harmful' ... say i'm creating an audiovisual-experience like a game that works in a browser, the use of labels would be detrimental to the layout and people with visual impairment (or others) might not be able to enjoy the game anyway. Downplaying the game to a point where anyone with any impairment can enjoy it would require me to have a team that consists of at least one person with one impairment of each type to make sure everyone can have the right experience. Most of it would be cut out in most places to adapt and the whole experience would change so.

I think this is something that comes at your own discretion depending on what you want to achieve , but this certainly answers my question on the matter

Answer 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.

Answer 3

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.