Doing it with style
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.
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.
This form is available for you to create your own style.
If you want to have a go just follow these instructions:
<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.
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.