Designing CSS web Forms
To make a form accessible, each form object needs a label
- link a label with an associated form input element
- form objects need both id="inputbox_name" and name="inputbox_name" attributes
- Example:
<p><label for=“address”>Address</label>
<textarea id=“address” name=“address” wrap=“soft” cols=“30” rows=“5”> </textarea></p>
top
lay out a form with CSS not tables
Use styles to line up the form labels on the left and the form input boxes on the right.
form p { width:400px; clear:both; line-height:1.5em}
- If you place form label and associated object inside paragraph tags, then the form will be 400 pixels in width
- Each <p> tag clears the float (left or right) in preparation for the next form label/object pair.
- Increasing <p> tag line-height spaces the input boxes a little apart from each other.
form p label {float:left; }
- Form labels float on the left side of page
form p input, form p textarea, form p select {float:right; }
- Form input boxes float (line up) on the right side of the page
Resources
top
