Please note, this is a STATIC archive of website www.cssplay.co.uk from 19 Oct 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Mobile Friendly Website

CSSPLAY

Doing it with style

CSS DEMOSA form with style

Date : Pre 2006

For all modern browsers




This demo is too wide for your mobile screen.
Please view on a tablet or PC.

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


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 html 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.

HTML Code

<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>

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

  1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
    A support donation is now required for this demonstration.
  2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
  3. 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.

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page