Tag error:  <txp:else/> ->  Textpattern Warning: tag does not exist  on line 973

Simple Form Style

There are many standard format forms around, but many of them are too complex, so I've been developing my own.

This is a work in progress.

The HTML

The basic layout is to have the form fields and labels in an ordered list. Checkboxes and radio lists come under their own fieldset within the form.

This form has been tested in Safari, Firefox 1.5 & 2, Internet Explorer 5.5, 6 & 7 and Opera 9

<form class="swift">
  <fieldset>
    <legend>Form Label</legend>
    <ol>
      <li>
        <label for="">Label:</label>
        <input type="text">
      </li>
      <li>
        <label for="">Password:</label>
	<input type="password">
      </li>
      <li>
        <label for="">Select one:</label>
	<select>
	  <option>of these</option>
	</select>
      </li>
      <li>
        <fieldset>
          <ul>
	    <li>
	      <label for="">
	        <input type="checkbox">
		Checkbox option (tick me)
	      </label>
	    </li>
	  </ul>
        </fieldset>
      </li>
      <li>
        <label for="">Comments:</label>
	<textarea></textarea>
      </li>
    </ol>
  </fieldset>
</form>

Style

The simplest way to format this as a consistent form seemed to be to float the labels as blocks to the left. This is what I've come up with so far:

form.swift {
  width: 33em;
  margin: 2em auto;
}

  .swift label {
    width: 15em;
    float: left;
  }

  .swift ol, .swift ul {
    list-style-type: none;
  }

  .swift li {
    padding-bottom: 1em;
    clear: left;
  }

  .swift fieldset fieldset {
    clear: left;
    border: none;
  }

  .swift label input {
    margin-right: 1ex;
  }

Feel free to use this if you want. Here's a boring example output. I'll be posting a more interesting version of this in the future.

If you want you can download the stylesheet and then include it in your web page.

1 October 2007