UI tabs from fieldsets

UI tabs from fieldsets

Hey guys,

In my understanding the semantics of <fieldset>s in forms are in fact what tabs are trying to express visually: sets of logically related fields with their associated content like help texts and media.

Then when I try to visually organize a complex form as tabs, it's pretty frustrating that, instead just being able to use the so natural and semantical <fieldset>s right away, you need to write some additional markup that doesn't entirely express the original semantics/intent of field-sets.

For example, it I have a form like this:

<form id="person">
    <fieldset>
           <legend>Name</legend>

        <label for="first-name">First name</label>
        <input id="first-name" name="first-name"/>

        <label for="middle-name">Middle name</label>
        <input id="middle-name" name="middle-name"/>

        <label for="last-name">Last name</label>
        <input id="last-name" name="last-name"/>
    </fieldset>

    <fieldset>
        <legend>Address</legend>

        <label for="city">City</label>
        <input id="city" name="city"/>

        <label for="street">Street</label>
        <input id="street" name="street"/>
    </fieldset>

    <fieldset>
        <legend>Contacts</legend>

        <label for="home-phone">Home phone</label>
        <input id="home-phone" name="home-phone"/>

        <label for="mobile">Mobile</label>
        <input id="mobile" name="mobile"/>
    </fieldset>
</form>

it would be really nice, or maybe even expected, to be able to say something like:

$('#person').tabs()


I was really surprised not to have a simple way to achieve this with jQuery.

What do you think?