Forms: semantically, accessibility and visually

explanations:

After reading this discussion on simplebit i thought about the problem and here is my opinion.

Using fieldset and legend appears to be the best way in order to respect accessibility and also usability. Indeed, it makes it easier to navigate with tab and structure of the page gets better as we group controls thematically

Now for the choice of including control in the label element, i refer to the spec where this case is describe. So we got a label for each control which is good to clearly labeled and structure our page. Including label allows us not to write the attribut for inside the label which helps reducing page weight (not a lot but as we say in France: les petites pierres font les grandes montagnes). Moreover, as we now have a container element, we can give CSS the power to set up the form graphically.

On my own, i don't really like using fieldset and label due to the graphical render which it is not in the habit of people ( but they enhance their understanding of the form). We can make it invisible so.

Habit is also to have a "table-formatted form", so lets'go with my proposal:

code of the form:

<form  action="post">
<fieldset>
<legend>Personnals Details</legend>
<label>First Name: <input type="text" tabindex="1" /></label>
<label>Surname: <input type="text" tabindex="2" /></label>
<label>Age: <input type="text" tabindex="3" /></label></fieldset>
</form>

result:

Personnals Details

Let's use CSS to obtain an usual rendering:

#formatted fieldset {
    border: 0px solid;  /* define border-style in order border: 0 being applied in opera7 */
    width: 23%;
    margin-left: 30%;
}
#formatted legend {
    font-size: 0px;
    color: white;  /* same color than background to hide legend from IE6, opera7 */   
}
#formatted label {
    display: block;
    text-align: right;
    margin-top: 0.2em;
}

result:

Personnals Details

Other usual style

#formatted2 fieldset {
    border: 0px solid;  /* define border-style in order border: 0 being applied in opera7 */
    width: 26%;
    margin-left: 30%;
}
#formatted2 legend {
    font-size: 0;
    color: white;  /* same color than background to hide legend from IE6, opera7 */
}
#formatted2 label {
    display: block;
    line-height: 1.5em;
}
#formatted2 input {
    float: right;
    margin-top: -1.5em;
}

result:

Personnals Details

author: loic dot mathaud @ bballizlife dot com