5 Ways to lay out forms in markup

form-markup.html

<!-- How to Layout a Form -->



<!-- GitHub (The Definition List Method) -->
<form>
  <fieldset>
    <dl class="form">
      <dt><label>Example Text</label></dt>
      <dd><input type="text" class="textfield" value="Example Value" /></dd>
    </dl>

    <dl class="form">
      <dt><label>Example Label</label></dt>
      <dd>
        <select>
          <option>Choose an option</option>
          <option>Git</option>
          <option>Subversion</option>
          <option>Social Coding</option>
          <option>Beets</option>
          <option>Bears</option>
          <option>Battlestar Galactica</option>
        </select>
      </dd>
    </dl>

    <div class="form-checkbox">
      <label>
        <input type="checkbox" checked="checked" />
        Available for hire
      </label>
      <p class="note">
        This will do insanely awesome and amazing things!
      </p>
    </div>
  </fieldset>
</form>

<!-- With Tables. Shown with labels to left of element -->
<form>
  <fieldset>
    <table>
      <tr>
        <td>
          <label>Example Text</label>
        </td>
        <td>
          <input type="text" class="textfield" value="Example Value" />
        </td>
      </tr>
      <tr>
        <td>
          <label>Example Label</label>
        </td>
        <td>
          <select>
            <option>Choose an option</option>
            <option>Git</option>
            <option>Subversion</option>
            <option>Social Coding</option>
            <option>Beets</option>
            <option>Bears</option>
            <option>Battlestar Galactica</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" checked="checked" />
        </td>
        <td>
          <label>Available for Hire</label>
          <p class="note">This will do insanely awesome and amazing things!</p>
        </td>
      </tr>
    </table>
  </fieldset>
</form>

<!-- Divs -->
<form>
  <fieldset>
    <div class="row">
      <div>
        <label>Example Text</label>
      </div>
      <div> 
        <input type="text" class="textfield" value="Example Value" />
      </div>
    </div>
    <div class="row">
      <div>
        <label>Example Label</label>
      </div>
      <div>
        <select>
          <option>Choose an option</option>
          <option>Git</option>
          <option>Subversion</option>
          <option>Social Coding</option>
          <option>Beets</option>
          <option>Bears</option>
          <option>Battlestar Galactica</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div>
        <input type="checkbox" checked="checked" />
      </div>
      <div>
        <label>Available for Hire</label>
        <p class="note">This will do insanely awesome and amazing things!</p>
      </div>
    </div>
  </fieldset>
</form>


<!-- Ps -->
<form>
  <fieldset>
    <p>
      <label>Example Text</label><br/>
      <input type="text" class="textfield" value="Example Value" />
    </p>
    <p>
      <label>Example Label</label><br/>
      <select>
        <option>Choose an option</option>
        <option>Git</option>
        <option>Subversion</option>
        <option>Social Coding</option>
        <option>Beets</option>
        <option>Bears</option>
        <option>Battlestar Galactica</option>
      </select>
    </p>

    <p class="form-checkbox">
      <label>
        <input type="checkbox" checked="checked" />
        Available for hire
      </label>
      <p class="note">
        This will do insanely awesome and amazing things!
      </p>
    </p>
  </fieldset>
</form>