Grouped Thematically Related Form Controls

Your address
Additional details
Interests

Code

<form>
  <fieldset>
    <legend>Your address</legend>
    <div class="control">
      <label for="first_name">First name</label><input id="first_name" type="text" />
    </div>
    <div class="control">
      <label for="last_name">Last name</label><input id="last_name" type="text" />
    </div>
    <div class="control">
      <label for="street">Street</label><input id="street" type="text" />
    </div>
    <div class="control">
      <label for="city">City</label><input id="city" type="text" />
    </div>
  </fieldset>
  <fieldset>
    <legend>Additional details</legend>
    <div class="control">
      <label for="biography">Biography</label><textarea id="biography"></textarea>
    </div>
    <div class="control">
      <label for="image">Image</label><input id="image" type="file" />
    </div>
    <div class="control">
      <label for="age_group">Age Group</label><select id="age_group">
        <option>
          0 to 9 Years
        </option>
        <option>
          10 to 19 Years
        </option>
        <option>
          20 to 29 Years
        </option>
        <option>
          30 to 39 Years
        </option>
        <option>
          40 to 49 Years
        </option>
        <option>
          50 to 59 Years
        </option>
        <option>
          60 to 69 Years
        </option>
        <option>
          70 to 79 Years
        </option>
        <option>
          80 to 89 Years
        </option>
        <option>
          90 to 99 Years
        </option>
      </select>
    </div>
  </fieldset>
  <fieldset>
    <legend>Interests</legend>
    <div class="control">
      <label for="hobbies">Hobbies</label><select id="hobbies" multiple="">
        <option>
          Playing soccer
        </option>
        <option>
          Dancing
        </option>
        <option>
          Gardening
        </option>
        <option>
          Watching movies
        </option>
      </select>
    </div>
    <div class="control">
      <label for="favourite_car">Favourite car?</label><select id="favourite_car"><optgroup label="Swedish Cars">
          <option>
            Volvo
          </option>
          <option>
            Saab
          </option>
        </optgroup><optgroup label="German Cars">
          <option>
            Mercedes
          </option>
          <option>
            Audi
          </option>
        </optgroup></select>
    </div>
    <div class="control">
      <label for="public_transports">Favourite public transport?</label><select id="public_transports" multiple=""><optgroup label="Ground">
          <option>
            Train
          </option>
          <option>
            Bus
          </option>
        </optgroup><optgroup label="Water">
          <option>
            Ship
          </option>
          <option>
            Submarine
          </option>
        </optgroup><optgroup label="Air">
          <option>
            Plane
          </option>
          <option>
            Cable Car
          </option>
        </optgroup></select>
    </div>
  </fieldset>
</form>
.control, fieldset {
  margin: 6px 0;
}

label {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}

input + label {
  width: auto;
}
NIL