Stylish Accessible Forms using CSS

The majority of sites designed these days have at least one form. If you’re a web designer then you’ll know that creating a template is essential if you are to be efficient in your work.

Many times I’ve compromised on a form’s design due to time restrictions. Below is a template that I use and that is quite flexible in its design. This form allows for any type of input field from a simple textfield to a group of radio buttons. If your quite comfortable with CSS then please feel free to adapt this code.

The fun you can have with this form can really change the way your forms look and make a great deal of difference to your overall web site design.

ACTUAL WORKING FORM

1. * Surname:
2. * Forename:
3. Company:
4. * Post Code:

1. What is your Gender: *

   Male
   Female
2. Please enter any additional information:

XHTML CODE

Below is a basic form structure.

I’ve used ordered lists <ol> to segment the form and <li> tags for each row of the form just as I find this easily breaks up the code for use by novice CSS users.

   <form name=”cssform” method=”post” action=”” class=”cssform”  >
      
   <fieldset>
      <legend><img src="images/personal.gif"  /></legend>
         <ol>
           <li>
            <label for="surname"><em>*</em>  Surname: </label>
             <input type="text" name="surname"  class="newfield"  size="35" />
           </li>
            <li>
            <label for="forename"><em>*</em>  Forename: </label>
             <input type="text" name="forename" class="newfield"  size="35" />
           </li>
           <li>
            <label for="company">  Company: </label>
            <input type="text"  name="company" class="newfield" size="35" />
          </li>
           <li>
            <label  for="pCode"><em>*</em> Post Code: </label>
            <input type="text"  name="pCode" class="newfield"  size="10" />
         </li>
    </fieldset>
    <fieldset>
    <legend><img src=" images/details.gif"  /></legend>
        <ol>
         <li>
         <fieldset>
            <legend>Gender <em>*</em></legend>
             <label><input name="gender”  type="radio" />Male</label><br />
             <label><input name="gender"  type="radio" /> Female </label>
       </fieldset>
         </li>
         <li>
       <fieldset>
          <legend>Additional  information</legend>
          <textarea name="info"  cols="32" rows="5"></textarea>
       </fieldset>
         </li>
     </ol>
    </fieldset>
    <div align="center">
      <input type="submit"  name="submit" class="submitbutton" value="SUBMIT INFO"  />
    </div>   
    </form>

ADDITIONAL TAGS

If you look through the code you will see some tags which you may deem as unnecessary (i.e <br /> tags after the radio button). These are to enable a cross browser compatible layout. Within the CSS code you will notice at the beginning that all the margins and padding are set to zero. Alternatively you could place the form in a div with zero margins and padding but it is entirely up to you.

CSS CODE

   * {
                   margin: 0;
                   padding: 0;
   }
   form.cssform {
                   width: 430px;
                  font-size: 0.8em;
                  line-height: 20px;
                  font-family: Tahoma,  Verdana;
   }
   fieldset {
                   margin-bottom: 10px;
                   border: none;
   }
   label {
                   line-height: 1.8;
                   vertical-align: top;
                   float: left;
                   text-align: right;
                   margin-right: 1em;
                   width: 120px;
                   font-weight: bold;
   }
   fieldset ol, li {
                   margin: 0px;
                   padding: 5px;
                  list-style: none;
   }
   fieldset fieldset {
                   border: none;
                   margin: 3px 0 0;
   }
   fieldset fieldset legend {
                   padding: 0 0 5px;
                   color: #000000;
   }
   legend {
                   padding: 0 10px 0 10px;
                   font-weight: bold;
   }
   fieldset fieldset label {
                   font-weight: normal;
                   width: 170px;
                   margin-left: 123px;
                   text-align: left;
   }
   form em {
                   font-style: normal;
                   font-weight: bold;
                   color: #FF0000;
   }
   input.newfield {
                   background: url(../images/newfield.gif)  repeat-x 0 100%;
                   border: none;
                   font-weight: bold;
   }
   textarea {
                   float: left;
                   background: none;
                   border: 1px solid #999999;
                   width: 100%;
                   font-weight: bold;
                   font-size: 1em;
   }
   .submitbutton {
                   width: 10em;
                   height: 1.6em;
                   font-weight: bold;
                   color: #FFFFFF;
                   background-color: #99ccff;
                   background-position:  center;
   }

BROWSER COMPATIBILITY

Currently this form has been tested and works in IE5.5, IE6.0 and IE7 and Firefox.

Hatch Media are a Website Design and SEO company based in Bolton, Manchester. Check out more of our work here Web Design Manchester SEO