Marking Up Forms

Here is my approach when creating forms:

Make use of the label/input value pair tags. Have the label for the attribute equal its corresponding input’s id. This allows the user to activate its control by clicking on the text. Example below:

<label for="fn">First Name</label>
<input type="text" id="fn" class="text_input">

Give each input type=”text” a class.

IE6 does not recognize attribute selectors. So, if you style the input selector (ie. input { border: 1px solid #CCC; }), and the form contains radio buttons or checkboxes, IE6 will apply that particular style to all inputs.



To adjust label width, float the label, then give it a width. Differentiate floating from from non-floating labels with <p>s and <div>s.

Example:

<style type="text/css" media="screen">
#myform p label { float: left; width: 9em; }
</style>
<p>
<label for="s_addrs">Shipping Address</label>
<input type="text" name="some_form" value="s_addrs" id="s_addrs" class="text_input">
</p>
<div>
<input type="checkbox" value="" id="check_saddrs" class="text_input">
<labe for="check_saddrs">Check if shipping address is different from personal</labe>
</div>

• Make sure you are careful when using the universal reset rule – * { padding: 0; margin: 0; }. This affects browser form elements. Below is a screenshot differentiating the padding on the right side of a select tag when the reset rule is not-applied/applied on Firefox 2.
  

I believe that these steps are a great starting point when creating forms. Good luck!