Java Quick Tip: Class.forName() with Java Generics | Home | Removing Padding Between a Flex List and Its Item Renderers

Filed under Quick Tips on September 29, 2008 by Alex Gutierrez

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!

Post a Comment Digg Del.icio.us

Post a Comment:

Name:

Email Address:

URL:

Comment:

Java Quick Tip: Class.forName() with Java Generics | Main | Removing Padding Between a Flex List and Its Item Renderers