A form with style

Pre 2006




PERSONAL INFORMATION

...more personal information...

MEDICAL HISTORY



...more medical history...

OPTIONS
CURRENT MEDICATION

...are you currently taking any medication?



...if currently taking medication, please indicate it in the space below :


If you want to create your own style for this form see below.

Available styles

If you have a browser that allows you to switch styles (FF for instance) then you can use that option, otherwise click on the link(s) below to switch styles using javascript. Your selected style will persist and automatically load next time you visit.

  1. CSS PLaY - by me
  2. No style - by me
  3. Simple and grey by Sabine
  4. Transparent pixel by Sabine
  5. Pseudo classes by Sabine
  6. Shades of red by Johan
  7. Blue shades by Velizar

copyright © stu nicholls - CSS play

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:

  1. Copy the xhtml below.
  2. Style the form as you want using a separate css file.
  3. Place the style sheet in a directory called 'formcss' off the form directory.
  4. If you want to add graphics then link to them in a directory off the formcss directory.
  5. The css must validate and the xhtml must not be altered.
  6. Send me the url of your form, your name for the form and your web url if you want a link.
  7. If I think it suitable then I will upload to this site and add it to the list.
  8. My email address is stu[at]cssplay.co.uk and title your email 'form css'.
  9. Remember - this page is xhtml1.1 and is served as application/xhtml+xml to browsers that understand.
  10. 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.


Please ask permission before using or copying this example to your web site.


Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page