Question

Given an html form like this:

<form action='/example/' id='example_form' method='POST' name='example_form'>
  <fieldset>
    <legend>Example form</legend>
    <label for='age'>
      Age
      <input id='age' name='age' tabindex='1' type='text' />
    </label>
    <label for='gender'>
      Gender
      <select id='gender' name='gender' tabindex='2'>
        <option disabled='disabled' id='gender' name='gender' value=''>Choose one:</option>
        <option id='gender_female' name='gender' value='female'>Female</option>
        <option id='gender_male' name='gender' value='male'>Male</option>
      </select>
    </label>
    <label for='height'>
      Height
      <input id='height' name='height' size='3' tabindex='3' type='text' />
    </label>
    <label for='weight'>
      Weight
      <input id='weight' name='weight' size='4' tabindex='4' type='text' />
    </label>
    <input id='Save' tabindex='5' type='submit' value='Save' />
  </fieldset>
</form> 

How would you style it to get the classic table based layout of label to the left, field to the right, everything aligned vertically? Tables are obviously out of the question. I can’t find anything on how to do this with implicit labels and just CSS.

If the answer is to not wrap the fields then so be it, but I’d prefer if a solution could be found for this as:

1. This is generated html.
2. I keep reading about how using implicit labels improves accessibility.

Any help/pointers/insight will be much appreciated.

Answer 1

Here are some basic stylings to get started

example jsfiddle

fieldset {width:300px;}
label {display:block;overflow:hidden;line-height:30px;}
label input, label select {float:right;}
input[type=submit] {float:right;width:100px;border:solid 1px;}