What's the best way to wrap Label and Input elements

Question

I'm working on a HTML5 form and I want to float some input elements and their labels. Its this the best way to do it?

<form>
    <fieldset class="float_left">
        <label for="login">Login ID #</label>
        <input type="text" name="login" id="login">
    </fieldset>
    <fieldset class="float_right">
        <label for="password">Password</label>
        <input type="password" name="password" id="password">
    </fieldset>
    <span class="forgot_login float_left"><a href="#">Forgot your login information?</a></span>
    <input type="submit" value="LOG IN" class="form_button float_right">
</form>

I seen people wrap them in divs, lists, etc. I want to follow the best practice. Should I also wrap every label and input elements with a fieldset even if I don't plan on styling it? Ex:

<form>
    <fieldset>
        <label for="name">Full Name:</label>
        <input type="text" name="name" id="name" placeholder="First Name" class="float_left">
    </fieldset>
    <fieldset>
        <label for="email">Email:</label>
        <input type="email" name="email" id="email" placeholder="Ex: [email protected]" class="full_input">
    </fieldset>
    <fieldset>
        <textarea rows="3" name="message" id="message" placeholder="1000 Character or less" class="full_input"></textarea>
    </fieldset>
    <input type="submit" value="SEND" class="form_button float_right">
</form>

Thanks.

Answer 1

The primary, original purpose of a fieldset is to convey a contextual association between multiple input fields to non-visual agents. It is expected that a screen reader is going to read the legend text, then the first field, then the legend, then the next field... As in: "Address: Street 1... Address: Street 2... Address: City..."

For sighted people, a fieldset does visually imply a container-type relationship of the same kind: those fields are related by context, but only when there are multiple fields.

So it never makes semantic sense to have a single label/field (a label is not a field, in that it does not accept input) in a fieldset. It's just annoying to people using screen readers (because it behaves like a redundant label). To sighted people it destroys the implication of relationship if you use it for single fields and also multiple fields, and takes up a lot more space.

In short, use it sparingly, semantically, and correctly - not as a styling device.

For a 'neutral' container, use a div or a span, because they carry no semantic information. List structures, paragraphs, all other elements have semantics and you need to be careful about how you use them.

People will tell you crazy things about the semantics of HTML elements. Don't take anyone at their word, including me. Go read the spec and know it for yourself.