Dates, Telephone numbers, multiple fields

Sometimes a group of small fields make more sense when grouped in a single row.

The multi class is quite flexible and can be used to create a range of more compact form fieldsets.

A simple date select construct.

<div class="multi">
  <span class="question">Date fields can be quite handy and are very common in forms.</span>
  <fieldset class="answer dateselect">
    <legend>Date</legend>
    <div>
      <label for="q13a">Day
        <select name="day" id="q13a">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
        </select>
      </label>
      <label for="q13b">Month
        <select name="month" id="q13b">
          <option>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
        </select>
      </label>
      <label for="q13c">Year
        <select name="year" id="q13c">
          <option>2001</option>
          <option>2002</option>
          <option>2003</option>
          <option>2004</option>
          <option>2005</option>
        </select>
      </label>
    </div>
  </fieldset>
</div>

<div class="multi">
  <span class="question">Telephone numbers are very common in forms.</span>
  <fieldset class="answer telephone">
    <legend>Telephone</legend>
    <div>
      <label for="q14a">Area Code
        <input size="4" name="q14a" id="q14a" type="text">
      </label>
      <label for="q14b">Number
        <input size="12" name="q14b" id="q14b" type="text">
      </label>
      <label for="q14c">Extension
        <input size="5" name="q14c" id="q14c" type="text">
      </label>
    </div>
  </fieldset>
</div>

<div class="multi">
  <fieldset>
    <legend>Login</legend>
      <label for="q15a">Username
        <input size="16" name="q15a" id="q15a" type="text">
      </label>
      <label for="q15b">Password
        <input size="16" name="q15b" id="q15b" type="password">
      </label>
      <input type="submit" value="submit" />
  </fieldset>
</div>