Codingdomain.com

Web forms

Some XHTML ideas

For making web forms, I've found these approaches very useful:

The structure

The whole form (or fieldset, depending on your design) is wrapped in a div tag. Each form field is wrapped in a div tag as well. Paragraph tags are avoided, so these can be used for inline text.

The basic structure:
<div class="form">
  <div class="formfield">

  </div>

  <div class="formfield">

  </div>

  <div class="formfooter">

  </div>
</div>

Simple fields

Text fields have a connected <label for=".."> tag. The class="text" is only needed for old browsers (IE6) which can't support the CSS syntax input[type=text].

A simple text field:
<div class="formfield required">
  <label for="nameField">Name :</label>
  <input type="text" class="text" id="nameField" value="" />
</div>

Complex fields

Complex fields, which span multiple lines, are wrapped in a inputgroup, so these can be aligned right to the label.

To avoid alignment problems, no whitespace should be used between the input field and the label tag.

A combination of fields:
<div class="formfield required">
  <label>Fruits :</label>
  <div class="inputgroup">
    <input type="checkbox" id="fruits_banana" name="fruits" value="banana"><label for="fruits_banana">Banana</label>
    <input type="checkbox" id="fruits_orange" name="fruits" value="orange"><label for="fruits_orange">Orange</label>
    <input type="checkbox" id="fruits_mango"  name="fruits" value="mango"><label for="fruits_mango">Mango</label>
  </div>
</div>

Checkboxes at the start

To display a checkbox at the start, consider using a different formfield class.

A combination of fields:
<div class="formfield-option required">
  <input type="checkbox" id="termsCheckbox" name="terms" value="1"><!--
  --><label for="termsCheckbox">I agree to the terms and conditions</label>
</div>

Continueing...

Now, try these structures out with your designs, and tell me how well that went! Did it make a difference?

blog comments powered by Disqus