Formatting HTML forms part II

After my post on HTML forms yesterday I was fooling around with the fieldset and label tags. Both seem quite usefull! But Internet Explorer is really quite bad at rendering the fieldset. My 4-year old daughter does a better job of coloring inside the lines

fieldset in IE

Mozilla Firefox is much better
fieldset in IE

Another thing to keep in mind is the behaviour in JavaScript. HTML 4.0 compliant browser add the fieldset to the form.elements[] array. Older browsers don’t. Using position based indices is not portable in this case (myForm.elements[ 2 ]), you should use name based indices (myForm.elements[“password”]). Labels on the other hand are not added.

If you want to use the labels in a struts tag you should do it like this.

<label for="password">Password </label><html:password property="password" styleId="password"/>

Clicking on the label will put the focus on the corresponding field. In case of a checkbox clicking on the label either checks or unchecks the box. Nice!