Hi Shahzad,
I’m pretty sure you’re not allowed to do this:
<label>
<input…>
<input…>
<randomstuff>
</label>
By the way, good job on using a fieldset and legend! Too often I see people forget how to use those and use something inappropriate instead.
You want your form to be accessible and make sense, right? I don’t like relying on Javascript and input value to show label text, but assuming you want to stick with that, I would do:
<form action="" id="loginform" method="post">
<fieldset>
<legend> Partner / Client Login: </legend>
<label [b]for="username-email"[/b]>Username or Email: <label>
<input type="text" [b]id="username-email"[/b] value="user name/Email:" onfocus="if(this.value=='user name/Email:') this.value='';" onblur="if(this.value=='') this.value='user name/Email:'"/>
<label [b]for="password" aria-describedby="forgotpw"[/b]>Password: </label>
<input type="text" [b]id="password"[/b] value="password:" onfocus="if(this.value=='password:') this.value='';" onblur="if(this.value=='') this.value='password:'"/>
<a href="#" [b]id="forgotpw"[/b]> forgot password? </a>
[b]<label for="rem_pass" class="checkbox">[/b]
<input type="checkbox" id="rem_pass" name="top1" value="remember_password" />[b] <span>[/b]remember password[b]</span>
</label>[/b]
<input type="image" src="go_button.png" [b]alt="Go"[/b] />
</fieldset>
</form>
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.
.login_dtls1{width:320px; [b]min-[/b]height:77px; float:left; margin:5px 0 8px 30px; clear:both; }
(min-height means, if the user has larger fonts set, if that makes the form taller then the .login_dtls1
box can grow too)
#loginform {margin: 0 auto;}
#loginform fieldset {border:2px solid #999999; width:280px; [b]min-[/b]height:63px; margin: 0 0 0 20px; background:url(Login%20form_bg.jpg) repeat-x;}
#loginform legend {color:#fff; background:#4b5360;border:2px outset #f8f6f7; padding: 2px 5px 2px 5px; font-weight:normal; font-size: 12px;}
#loginform label{[b]position: absolute; left: -999em;[/b]} (this hides your new labels from the screen)
#loginform input[b][type=text][/b] {color:#666; font-weight:normal; text-transform:lowercase; font-size:12px; border: 1px solid #333333; padding-left:3px; width:110px; margin-top:5px; }
(we don't want the checkbox label hidden though)
[b]#loginform label.checkbox {position: static;}
#loginform label span {padding-left: 25px; font-size: 10px; vertical-align: middle;}
#loginform .checkbox input {width: auto; height: auto; vertical-align: middle;}[/b]
(forgot password link)
[b]input+a { color:#fff; text-align:right; text-decoration:none; }[/b]
#loginform [b]input[type=image][/b] { float:right; margin:0 0 0 0px; padding:0; width:30px; height:30px; border:none; }
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.
cheers,
poes