I am making login form when I am testing it on Google Chrome It is working fine I am attaching images and Code for your reference, please help me out how I can fix this error in my css or in HTML. I also want to align my Check Box text in to Middle it is coming in bottom I used vertical align property but its not working, or if you have any another way to make it easy please help me out..

So stuff in bold is stuff I'd change in the HTML. Each input gets its very own dedicated label which is still invaluable for people using text browsers and screen readers. Since most of your users will be sighted and using graphical browsers, you hide those labels by pulling them offscreen. That way, you have proper labels but can keep using your Javascript placeholders like you have now.Also I've added aria-describedby. I'm not sure if this is the right way to do it, but since the anchor isn't a form control, it may get skipped by screen readers who go into a "Forms Mode" where users can type into the forms. I'm hoping using aria-describedby here means those users will get alerted to a related bit of text, the "forgot password" link. Another idea would be to put the link inside the label, still hide the label text but just show the anchor who is inside. Stuff inside form controls like labels are okay in screen readers so you'd be good then. Just needs a bit of funky CSS.

For the checkbox, I seem to recall that you can get most browsers to look ok with vertical-align but IE has these "other ideas" about vertical-align so we might not be able to get them lined up great in IE, but we can for everyone else. I think the trick was to set both inline elements to "vertical-align: middle" rather than just one of them. Also be careful if you set one font-size on the label and another on inputs (since this would include your checkbox).

Also, input type=image need alt (instead of value which normal submits have), so when your button image doesn't load, people see the text "Go" instead of nothing at all. The validator will tell you this anyways.

Your images aren't approved at this time so I can't see how you want the layout to be, exactly, but I can write some CSS for this new HTML I wrote that should at least look normal. Once I see your attachments then I could probably tweak the CSS to look more like you're trying to do.

The above CSS won't work in IE6 because it uses attribute selectors (input[type=text] etc) and adjascent sibling selector (+) but if you have to support IE6 too then you can remove the type=text from the input declaration and might need extra code to help the checkbox. For the + selector you could instead just use the new id I've added to the anchor. I only added the id so it would work with aria-describedby but if you decide instead to put the link in a label you won't need an id on it anyways.

I hope something like this will work for you. I haven't built it myself so it's all just code from my head.

In the future if you want to post code like I did, wrap ` tags around your code and the forums will format it for you.