Stu Nicholls | CSSplay | CSS styling of forms

Information

I have had many requests recently for a demonstration of using CSS for styling FORMS. Well here is a quick example based on form examples on the w3c website.

Note that you can click on the text to activate the adjacent inputs, checkboxes and radios (thanks to Markus and Steve Williams for pointing out this omission).

Forms are not very friendly when it comes to CSS and each browser has its own way of handling them. Styles that work in one browser will not work in another, so depending on which browser you are using you will see a slightly different interpretation.

24th November 2005

Small alteration to the form xhtml suggested by Sabine to add <p></p> tags around the fieldset text.

Your CSS

This form is available for you to create your own style.

If you want to have a go just follow these instructions:

Copy the xhtml below.
Style the form as you want using a separate css file.
Place the style sheet in a directory called 'formcss' off the form directory.
If you want to add graphics then link to them in a directory off the formcss directory.
The css must validate and the xhtml must not be altered.
Send me the url of your form, your name for the form and your web url if you want a link.
If I think it suitable then I will upload to this site and add it to the list.
My email address is stu[at]cssplay.co.uk and title your email 'form css'.
Remember - this page is xhtml1.1 and is served as application/xhtml+xml to browsers that understand.
Note that my default text size is 76%.

xhtml

<form id="two" action="..." method="post">
  <fieldset id="personal">
    <legend>PERSONAL INFORMATION</legend>
    <label for="lastname">last name : </label> 
    <input name="lastname" id="lastname" type="text" 
    tabindex="1" />
    <br />
    <label for="firstname">first name : </label>
    <input name="firstname" id="firstname" type="text" 
    tabindex="2" />
    <br />
    <label for="address">address : </label> 
    <input name="address" id="address" type="text" 
    tabindex="3" />
    <p>...more personal information...</p>
  </fieldset>
  <fieldset id="medical">
    <legend>MEDICAL HISTORY</legend>
    <label for="smallpox">smallpox : </label>
    <input name="illness" id="smallpox" type="checkbox" 
    value="smallpox" tabindex="20" />
    <br />
    <label for="mumps">mumps : </label> 
    <input name="illness" id="mumps" type="checkbox" 
    value="mumps" tabindex="21" />
    <br />
    <label for="dizziness">dizziness : </label> 
    <input name="illness" id="dizziness" type="checkbox" 
    value="dizziness" tabindex="22" />
    <br />
    <label for="sneezing">sneezing : </label> 
    <input name="illness" id="sneezing" type="checkbox" 
    value="sneezing" tabindex="23" />
    <p>...more medical history...</p>
  </fieldset>
  <fieldset id="opt">
    <legend>OPTIONS</legend>
    <select name="choice">
      <option selected="selected" label="none" value="none">
      none
      </option>
      <optgroup label="Group 1">
        <option label="cg1a" value="val_1a">Selection group 1a
        </option>
        <option label="cg1b" value="val_1b">Selection group 1b
        </option>
        <option label="cg1c" value="val_1c">Selection group 1c
        </option>
      </optgroup>
      <optgroup label="Group 2">
        <option label="cg2a" value="val_2a">Selection group 2a
        </option>
        <option label="cg2b" value="val_2a">Selection group 2b
        </option>
      </optgroup>
      <optgroup label="Group 3">
        <option label="cg3a" value="val_3a">Selection group 3a
        </option>
        <option label="cg3a" value="val_3a">Selection group 3b
        </option>
      </optgroup>
    </select>
  </fieldset>
  <fieldset id="current">
    <legend>CURRENT MEDICATION</legend>
    <p>...are you currently taking any medication?</p> 
    <label for="yes">yes : </label>
    <input name="medication" id="yes" type="radio" 
    value="yes" tabindex="35" />
    <br />
    <label for="no">no : </label>
    <input name="medication" id="no" type="radio" 
    value="no" tabindex="35" />
    <br />
    <p>...if currently taking medication, 
    please indicate it in the space below :</p>
    <textarea name="current_medication" tabindex="40" 
    cols="40" rows="10">
    </textarea>
  </fieldset>
  <p>
  <input id="button1" type="submit" value="Send" /> 
  <input id="button2" type="reset" />
  </p>
</form>

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.

Recommended Sites

VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo
Web design in Dorset
Bournmouth based web design agency
SEO
First Rate - Australian SEO Company
SEO Company
SEO company based in Manchester
pay as you go e-commerce
Build your own SEO friendly webshop
web hosting, dedicated servers
web reseller, managed servers

"The web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."