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