My lastest project at work has been to create a web form. Nothing too fancy, although the form does have to work in IE 5+, NS 6+ (I'm battling very hard to NOT have to code for 4.7), as well as Firefox .8+ and Opera 7+. I want to avoid tables if at all possible.
After doing a bit of googling on the latest web form trends and standards, I came across http://www.quirksmode.org/css/forms.html (since IE is a poor supporter of css). Seemed simple enough, but didn't work in NS--the label text disappeared. Addionally, my form was complicated because I had some navigation on the left (floated) with the form on the right; the
<br> tags screwed up the layout in IE 6--they cleared the first line of the form until the bottom of nav text on the left. I eventually fixed the second problem by floating the form wrapper
float:right instead of the wrapper for the nav
But still my NS problem remained. I then discovered that the NS disappearing
<label> text is a known phenomenon, but I wasn't happy with the workaround. My simple
<label for="name">First name<label><input id="name"...>
<label for="name"><span>First name<span></label><input id="name"...>
<span> added so that NS would display the label text.
But it didn't work in NS 6.0.
So I then decided to heck with the accepted norm of stying the form and I replaced all of that label code with a simple, styled
<h5>. My code now looks like this:
font:bold 12px arial, sans-serif;
<h5>First name</h5><input name="fname" ...>
My code is valid XHTML 1.0 Strict (valid css, as well) and displays in all tested browsers (haven't tested in IE 5/5.5 yet), so if my code is so 'bad' why does it work so good? And just how 'bad' is it?