Using FieldSets to group items in a form

Fieldsets are used to visually group items in a form, making it easier for a user to scan the page and understand the relationship between each item.

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Without FieldSets</a></li>
        <li><a href="#tabs-2">With FieldSets</a></li>
        <li><a href="#tabs-3">Styled</a></li>
    </ul>
    <div id="tabs-1">
       <Label>First Name<input type="textbox" id="fname"></label><br>
<Label>Last Name<input type="textbox" id="lname"></label><br>
<Label>Email Address <input type="textbox" id="email"></label><br>
<Label>Phone Number <input type="textbox" id="phone"></label><br>
<Label for="MktNone">None</label><input type="radio" id="MktNone" name="MarketingPref"><br>
<Label for="MktEmail">Email</label><input type="radio" id="MktEmail" name="MarketingPref"><br>
<Label for="MktPhone">Phone</label><input type="radio" id="MktPhone" name="MarketingPref"><br>
<label>I own a BluRay player<input type="checkbox" id="BluRay"></label><br>
<label>I own a VCR<input type="checkbox" id="VCR"></label><br>
<label>I own an 8-Track Player<input type="checkbox" id="8Track"></label><br>
    </div>
    <div id="tabs-2">
        <fieldset>
    <legend>Contact:</legend>
    <Label>First Name<input type="textbox" id="fname2"></label><br>
    <Label>Last Name<input type="textbox" id="lname2"></label><br>
    <Label>Email Address <input type="textbox" id="email2"></label><br>
    <Label>Phone Number <input type="textbox" id="phone2"></label>
</fieldset>
<fieldset>
   <legend>Marketing Preferences:</legend>
   <Label for="MktNone2">None</label><input type="radio" id="MktNone2" name="MarketingPref2"><br>
   <Label for="MktEmail2">Email</label><input type="radio" id="MktEmail2" name="MarketingPref2"><br>
   <Label for="MktPhone2">Phone</label><input type="radio" id="MktPhone2" name="MarketingPref2">
</fieldset>
<fieldset>
    <legend>Technology:</legend>
    <label>I own a BluRay player<input type="checkbox" id="BluRay2"></label><br>
    <label>I own a VCR<input type="checkbox"...

CSS

body {
    margin-left: 10px;  
    margin-right: 10px;
    font-size: 12px;    
}

h3 { 
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

input, checkbox{
    margin-left: 10px; 
    margin-bottom: 10px;    
}

#tabs-3 fieldset {
  font-family:verdana,arial,sans-serif;
  border: 1px solid #55a;
    margin-bottom: 16px;
}

#tabs {width: 600px;}

#tabs-3 label {
  float:left;
  width:500px;
  margin-right:0.5em;
  margin-top:0.2em;
  text-align:right;
}

#tabs-3 .preferences label {
    width: 105px;
}

#tabs-3 .technology label {
    width: 200px;
}

#tabs-3 legend {
  padding: 0.2em 0.5em;
  border:1px solid #00f;
  color:#00f;
  font-size:90%;
  background-color: #fff;
    margin-left: auto;
    margin-right: auto;
}

JavaScript

$("#tabs").tabs();