XHTML/CSS web forms: 5 simple techniques

by Judd Lyon
Feb 14, 2009
Filed in: Web design & development

Technique 1: The Label Sandwich

Wrap your inputs, selects, and textareas in the label element, and set them all as block-level. Set radio buttons and checkboxes to display inline so they'll appear on the same line. If you'd like your label and radio buttons/checkboxes on separate lines, you can either choose not to wrap it in the label, or use a hard line-break. One of each is shown below.

While this may seem a little funky, the W3C actually shows this in their "implicit" label example.

Key benefit: simplicity

The code:

  
label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>
      
      <label for="name">
        Name
        <input name="name" id="name" size="20" />
      </label>
      
      <label for="email">
        Email
        <input name="email" id="email" size="20" />
      </label>
      
      <label for=" Choices"> Choices (radio) &amp;mdash; <em>wrapped label</em>
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
      </label> 
      
    <label for=" Choices2" style="margin-bottom: 0;"> Choices (checkbox) &amp;mdash; <em>non-wrapped label, margin reset</em></label>
      <input type="checkbox" name=" Choice2" /> Choice 1
      <input type="checkbox" name=" Choice2" /> Choice 2
      <input type="checkbox" name=" Choice2" /> Choice 3
    
    <div style="height: 10px;"><!-- just to split the demo up --></div>
    
    <label for=" Choices3"> Choices (checkbox) &amp;mdash <em>wrapped, hard line-break</em><br />
      <input type="checkbox" name=" Choice3" /> Choice 1
      <input type="checkbox" name=" Choice3" /> Choice 2
      <input type="checkbox" name=" Choice3" /> Choice 3
    </label>      
    <label for="dropdown">
      Question
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
    </label>
      
    <label for="message">
      Message
      <textarea name="message"rows="12" cols="36"></textarea>
    </label>
      
     <input type="submit" value="send it" />
      
    </fieldset>
  </form>

The Output:

Technique 2: The Lazy-Ass

Purists will cringe at this one, but many developers go for the quick and easy by peppering their markup with breaks. It works, but it hamstrings your styling ability. You don't need any CSS to pull it off.

Key benefit: speed

The code:


  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>
      
      <label for="name">Name</label>
        <input name="name" id="name" size="20" />
      
      <br /><br />
      
      <label for="email">Email</label>
        <input name="email" id="email" size="20" />
     
     <br /><br />
      
      <label for=" Choices"> Choices (radio)</label>
      <br /> 
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
    
    <br /><br />
          
    <label for=" Choices3"> Choices (checkbox)</label> 
    <br />
      <input type="checkbox" name=" Choice3" /> Choice 1
      <input type="checkbox" name=" Choice3" /> Choice 2
      <input type="checkbox" name=" Choice3" /> Choice 3
         
    <br /><br />
         
    <label for="dropdown">Question</label>
     
     <br />
      
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
    
     <br /><br />
      
    <label for="message">Message</label>
    <br />
    
      <textarea name="message"rows="12" cols="36"></textarea>
    <br />
    
     <input type="submit" value="send it" />
      
    </fieldset>
  </form>

The output:

Technique 3: Mr. Semantic

One of the tenets of web standards is to think about the type of data you're working with and code accordingly. Since a form is a list of sequential questions, the ordered list element makes for a snug fit.

Key benefit: structure

The code:


ol {
  list-style: none; 
  padding-left: 0;
  }
  
  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>
      
      <ol>
        <li>
          <label for="name">Name</label>
          <input name="name" id="name" size="20" />
       </li> 
        
       <li>
        <label for="email">Email</label>
        <input name="email" id="email" size="20" />
       </li>
        
      <li>
        <label for=" Choices"> Choices (radio)</label>
          <input type="radio" name=" Choice" /> Choice 1
          <input type="radio" name=" Choice" /> Choice 2
          <input type="radio" name=" Choice" /> Choice 3
      </li>
       
      <li>    
      <label for=" Choices3"> Choices (checkbox)</label> 
        <input type="checkbox" name=" Choice3" /> Choice 1
        <input type="checkbox" name=" Choice3" /> Choice 2
        <input type="checkbox" name=" Choice3" /> Choice 3
     </li>       
           
     <li>
      <label for="dropdown">Question</label>
        
        <select id="dropdown">
          <optgroup label="Group of Options">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </optgroup>
        </select>
      </li>
      
      <li>  
      <label for="message">Message</label><br />
        <textarea name="message"rows="12" cols="36"></textarea>
      </li>
      
      <li><input type="submit" value="send it" /></li>
       
      </ol>
  
    </fieldset>
  </form>

The output:

Technique 4: DIVide and conquer

What if you need your form to be horizontally-oriented? There are situations (and clients) that call for a form to use horizontal space. Here we can rely on our old pal the div, since we're dividing the form into columns. This is easily acheived using the Label Sandwich method.

Key benefit: use of space

The code:


label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column {
  width: 150px;
  height: 250px;
  padding-left: 20px;
  border-left: 1px solid #ccc;
  float: left;
  }

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>


<div class="form-column">
  
      <label for="name">
        Name
        <input name="name" id="name" size="20" />
      </label>
      
      <label for="email">
        Email
        <input name="email" id="email" size="20" />
      </label>
      
      <label for=" Choices"> Choices (radio)<br />
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
      </label> 
</div><!-- /form-column -->    

<div class="form-column">
    
    <label for=" Choices3"> Choices (radio)<br />
      <input type="radio" name=" Choice2" /> Choice 1
      <input type="radio" name=" Choice2" /> Choice 2
      <input type="radio" name=" Choice2" /> Choice 3
    </label>     
    
    <label for=" Choices3"> Choices (checkbox)<br />
      <input type="checkbox" name=" Choice2" /> Choice 1
      <input type="checkbox" name=" Choice2" /> Choice 2
      <input type="checkbox" name=" Choice2" /> Choice 3
    </label>  
    
    <label for="dropdown">
      Question
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
    </label>

     <input type="submit" value="send it" />

</div><!-- /form-column -->    
  
    
    </fieldset>
  </form>

The output:

Technique 5: The Old School Lazy-Ass

If you'd rather not bother with CSS, are in a huge hurry, and don't plan on browser-testing – you should find a new career. Just kidding, this one's for you.

Key benefit: intuitive

The code:

  <form action="" method="">
    <fieldset>
      <legend>Contact Form</legend>

<table>

  <tr>
 <!-- column one -->   

    <td>
        <label for="name">Name</label>
        <input name="name" id="name" size="20" />
      
      <br /><br />
      
      <label for="email">Email</label>
        <input name="email" id="email" size="20" />
     
     <br /><br />
      
      <label for=" Choices"> Choices (radio)</label>
      <br /> 
        <input type="radio" name=" Choice" /> Choice 1
        <input type="radio" name=" Choice" /> Choice 2
        <input type="radio" name=" Choice" /> Choice 3
    </td>
 
 <!-- column two -->   
    <td>
    
    <label for=" Choices3"> Choices (checkbox)</label> 
    <br />
      <input type="checkbox" name=" Choice3" /> Choice 1
      <input type="checkbox" name=" Choice3" /> Choice 2
      <input type="checkbox" name=" Choice3" /> Choice 3
         
    <br /><br />
         
    <label for="dropdown">Question</label>
     
     <br />
      
      <select id="dropdown">
        <optgroup label="Group of Options">
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
        </optgroup>
      </select>
</td>
 
 <!-- column three -->   
    <td>   
    <label for="message">Message</label>
    <br />
    
     <input type="submit" value="send it" /></td>
  </tr>
</table>      
            
    </fieldset>
  </form>