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

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>

Demo: http://www.cssplay.co.uk/menu/form.html

Source: http://www.cssplay.co.uk/menu/form.html

Related Listings:

1. Form Style This form is available for you to create your own...
2. Awesome Form Script Using simple and semantic HTML, this method uses comprehensive CSS...
3. Uni-Form Script ni-Form is an attempt to standardize form markup (xhtml) and...
4. Accessible, stylish form layout Yes, HTML forms are the worst things known to web...
5. Accessible CSS Forms In a recent study of web design patterns, Dr. Melody...

Do you like this post?

Email: