Good Looking Table-less Forms

By on

After reading the write up entitled Prettier Accessible Forms on A List Apart I felt motivated to gussy up my own attempts at creating a standard CSS forms library. I had started some work on a similar project several weeks ago with a coworker, Chris, and it really seemed promising. I feel that the library that we developed toghether is a slightly better approach than the one Nick Rigby used in his article, although his work is really great. What’s more is that there isn’t any JavaScript involved, which seemed to be a major complaint about his approach in the discussion that followed.

The following solution has been tested in IE5 .5, IE6 , IE7 , FireFox 1.5, and Opera 8.5. Unfortunately I do not have access to a Mac so I cannot test Safari or IE for Mac.

And here’s the markup, dont worry, it’s mostly just a bunch of for, id, and name attributes. I would just hate to give an example that isn’t entirely correct. I’m trying to make it easy for you to copy here!

<span class="syn_MarkupElement"><fieldset</span> <span class="syn_MarkupAttribute">class</span><span class="syn_Symbol">=</span><span class="syn_String">"form"</span><span class="syn_MarkupElement">></span>

  <span class="syn_MarkupElement"><legend></span>Purchase Information<span class="syn_MarkupElement"></legend></span>

  <span class="syn_MarkupElement"><label></span>Card Type:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><fieldset</span> <span class="syn_MarkupAttribute">class</span><span class="syn_Symbol">=</span><span class="syn_String">"list"</span><span class="syn_MarkupElement">></span>


    <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"radio"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"discover"</span> 

        <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"card_type"</span> <span class="syn_MarkupAttribute">value</span><span class="syn_Symbol">=</span><span class="syn_String">"Discover"</span> <span class="syn_MarkupElement">/></span>

    <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"discover"</span><span class="syn_MarkupElement">></span>Discover<span class="syn_MarkupElement"></label><br/></span>

    <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"radio"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"master"</span> 

        <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"card_type"</span> <span class="syn_MarkupAttribute">value</span><span class="syn_Symbol">=</span><span class="syn_String">"Master Card"</span> <span class="syn_MarkupElement">/></span>

    <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"master"</span><span class="syn_MarkupElement">></span>Master Card<span class="syn_MarkupElement"></label><br/></span>

    <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"radio"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"visa"</span> 

        <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"card_type"</span> <span class="syn_MarkupAttribute">value</span><span class="syn_Symbol">=</span><span class="syn_String">"Visa"</span> <span class="syn_MarkupElement">/></span>

    <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"visa"</span><span class="syn_MarkupElement">></span>Visa<span class="syn_MarkupElement"></label><br/></span>

  <span class="syn_MarkupElement"></fieldset><br/></span>

  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"card"</span><span class="syn_MarkupElement">></span>Credit Card Number:<span class="syn_MarkupElement"></label></span>

  <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"text"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"card"</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"card"</span> <span class="syn_MarkupElement">/><br/></span>


  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"code"</span><span class="syn_MarkupElement">></span>Verification Code:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"text"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"code"</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"code"</span> <span class="syn_MarkupElement">/><br/></span>


  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"street"</span><span class="syn_MarkupElement">></span>Street Address:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"text"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"street"</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"street"</span> <span class="syn_MarkupElement">/><br/></span>


  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"city"</span><span class="syn_MarkupElement">></span>City:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"text"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"city"</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"city"</span> <span class="syn_MarkupElement">/><br/></span>


  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"state"</span><span class="syn_MarkupElement">></span>State:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><select</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"state"</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"state"</span><span class="syn_MarkupElement">></span>

    <span class="syn_MarkupElement"><option></span>Select a State<span class="syn_MarkupElement"></option></span>
    <span class="syn_MarkupElement"><option></span>Alaska<span class="syn_MarkupElement"></option></span>
    <span class="syn_MarkupElement"><option></span>Arizona<span class="syn_MarkupElement"></option></span>
  <span class="syn_MarkupElement"></select><br/></span>


  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"zip"</span><span class="syn_MarkupElement">></span>Zip Code:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"text"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"zip"</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"zip"</span> <span class="syn_MarkupElement">/><br/></span>


  <span class="syn_MarkupElement"><label></span>Invoice Type:<span class="syn_MarkupElement"></label></span>
  <span class="syn_MarkupElement"><fieldset</span> <span class="syn_MarkupAttribute">class</span><span class="syn_Symbol">=</span><span class="syn_String">"list"</span><span class="syn_MarkupElement">></span> 

    <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"checkbox"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"mail"</span> 

        <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"invoice_type"</span> <span class="syn_MarkupAttribute">value</span><span class="syn_Symbol">=</span><span class="syn_String">"Mail"</span> <span class="syn_MarkupElement">/></span>

    <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"mail"</span><span class="syn_MarkupElement">></span>Mail<span class="syn_MarkupElement"></label><br/></span>

    <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"checkbox"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"email"</span> 

        <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"invoice_type"</span> <span class="syn_MarkupAttribute">value</span><span class="syn_Symbol">=</span><span class="syn_String">"E-Mail"</span> <span class="syn_MarkupElement">/></span>

    <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"email"</span><span class="syn_MarkupElement">></span>E-Mail<span class="syn_MarkupElement"></label><br/></span>

  <span class="syn_MarkupElement"></fieldset><br/></span>

  <span class="syn_MarkupElement"><label</span> <span class="syn_MarkupAttribute">for</span><span class="syn_Symbol">=</span><span class="syn_String">"comments"</span><span class="syn_MarkupElement">></span>Additional Comments:<span class="syn_MarkupElement"></label></span>

  <span class="syn_MarkupElement"><textarea</span> <span class="syn_MarkupAttribute">name</span><span class="syn_Symbol">=</span><span class="syn_String">"comments"</span> <span class="syn_MarkupAttribute">id</span><span class="syn_Symbol">=</span><span class="syn_String">"comments"</span><span class="syn_MarkupElement">></span>

    <span class="syn_MarkupElement"></textarea><br/></span>

  <span class="syn_MarkupElement"><input</span> <span class="syn_MarkupAttribute">type</span><span class="syn_Symbol">=</span><span class="syn_String">"submit"</span> <span class="syn_MarkupAttribute">value</span><span class="syn_Symbol">=</span><span class="syn_String">"Submit"</span> <span class="syn_MarkupAttribute">class</span><span class="syn_Symbol">=</span><span class="syn_String">"submit"</span> <span class="syn_MarkupElement">/></span>

<span class="syn_MarkupElement"></fieldset>

After reading the Prettier Accessible Forms article, Chris and I both agreed that nesting the fieldsets really is the best approach for radio buttons and checkboxes. It just makes sense to have them wrapped up all snug in their own little containers. It also builds in a few more formatting options for later use.

In order for this to work you’ll need to do a couple of things.

  1. Add a <br /> tag after each input for the top level fieldset, and after each label for the nested fieldsets that contain the radio buttons and checkboxes.
  2. Give nested fieldsets a class of list. You could probably do without this, but I find it convenient and semantically logical. I’m sure with some more experimentation I’ll be able to lose some fat on the markup and CSS .
  3. Add a class of submit to the submit button. This is critical if you want to line the submit button up with the other controls.

The full CSS looks like this:

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;padding&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;15px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;border&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;solid&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;1px&lt;/span&gt; &lt;span class="syn_StyleColour"&gt;#ddd&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;    

&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;label&lt;/span&gt;&lt;span class="syn_Symbol"&gt;,&lt;/span&gt; 
&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;input&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;display&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;block&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;float&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-bottom&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;5px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-top&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;5px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;


&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;legend&lt;/span&gt; 
&lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;color&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleColour"&gt;#0044CC&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;font-weight&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;bold&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;padding&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;5px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;select&lt;/span&gt; 
&lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;display&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;inline&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;float&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-bottom&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;5px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-top&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;5px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;                   

&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;label&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;padding-right&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;20px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;               
&lt;span class="syn_StyleParameter"&gt;text-align&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;right&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;width&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;95px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;br&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;clear&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;submit&lt;/span&gt; 
&lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;display&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;inline&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;             
&lt;span class="syn_StyleParameter"&gt;float&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;none&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;                               

&lt;span class="syn_StyleParameter"&gt;margin-bottom&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;0px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_Comment"&gt;/* ie 5.x hack - fixes margin bug 
http://www.tantek.com/CSS/Examples/boxmodelhack.html*/&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;95px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;                      
&lt;span class="syn_StyleParameter"&gt;voice-family&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_String"&gt;"&lt;/span&gt;&lt;span class="syn_Escape"&gt;\"&lt;/span&gt;&lt;span class="syn_String"&gt;}&lt;/span&gt;&lt;span class="syn_Escape"&gt;\"&lt;/span&gt;&lt;span class="syn_String"&gt;"&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt; 

&lt;span class="syn_StyleParameter"&gt;voice-family&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleValue"&gt;inherit&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_Comment"&gt;/* reset the margin back */&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;115px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-right&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;0px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;margin-top&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;10px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;                                           
&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;fieldset&lt;/span&gt;&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;list&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;border&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_Number"&gt;0&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;float&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-bottom&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;3px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Comment"&gt;/* in case someone adds a legend */&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;fieldset&lt;/span&gt;&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;list&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;legend&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;display&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;none&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;fieldset&lt;/span&gt;&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;list&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;label&lt;/span&gt;&lt;span class="syn_Symbol"&gt;,&lt;/span&gt; 
&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;fieldset&lt;/span&gt;&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;list&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;input&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;margin-bottom&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;2px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_StyleParameter"&gt;margin-top&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleLength"&gt;2px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;

&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;form&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;fieldset&lt;/span&gt;&lt;span class="syn_Symbol"&gt;.&lt;/span&gt;&lt;span class="syn_StyleSelector"&gt;list&lt;/span&gt; &lt;span class="syn_StyleSelector"&gt;label&lt;/span&gt; &lt;span class="syn_Symbol"&gt;{&lt;/span&gt;

&lt;span class="syn_StyleParameter"&gt;margin-left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt; &lt;span class="syn_StyleLength"&gt;5px&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;                  
&lt;span class="syn_StyleParameter"&gt;text-align&lt;/span&gt;&lt;span class="syn_Symbol"&gt;:&lt;/span&gt;&lt;span class="syn_StyleValue"&gt;left&lt;/span&gt;&lt;span class="syn_Symbol"&gt;;&lt;/span&gt;
&lt;span class="syn_Symbol"&gt;}&lt;/span&gt;       

The approach used here is the same used on Quirksmode, except that it allows for variable width form elements, lists, and it takes into consideration that forms usually have a submit button (that should be styled).

All of the labels and inputs are floated to the left and then cleared by a <br />. Then the submit button is un-floated and it’s inherited styles are effectively reset. At this point, the form will look great in all of the browsers mentioned above. Except IE5 .5 where an additional left-margin of 20px magically appears. I believe that this is due to IE’s broken box model. So I used Tantek’s box model hack to fix it.

So there you have it. Another approach to Prettier Accessible Forms. Maybe someday we’ll have a CSS layout, header, navigation, and forms library that can easily be plugged in to any project. But then again, XHTML 2.0 and CSS 3 will be in use by then and we won’t have much need for it anymore. Regardless, I’m glad to see A List Apart putting out material that helps to standardize an approach to web design, and I certainly hope to continue to be a part of that process.

Like this post? Then Digg it!