A Standard Style Sheet Page 3

Labels on the Left for Groups of Fields

Often a single label will refer to a group of fields (for example a box which asks for a date day/month/year using three dropdown boxes) Using the technique above and putting all the fields into a single label would not be valid html though, as a label should refer to only one field.

The solution is to use divs with class="label" and class="field" instead of the actual tags.

Lefthand Labels and Sets of Fields
Multiple Boxes
CheckboxesWhere there is more than one box, you don't technically use a label. The labels inside this div are in the class columns.
CheckboxesGiving a field div the class 'scroll' will cause it to do just that, he default height being 5em;
 
<fieldset class="leftLabels">
<legend>Lefthand Labels and Sets of Fields</legend>
<div class="label">
<span>Multiple Boxes</span>
<div class="field">
<label>
<span class="hidden">Expiry Date</span>
<input name="cardday" id="month" size="3">
(Month)
</label>
<label>
<span class="hidden">Expiry Date</span>
<input name="cardday" id="year" size="3">
(Year)
</label>	
</div>
</div>
<div class="label">
<span>Checkboxes<span class="helptext">Help!</span></span>
<div class="field boxlist">
<label>
<input type="checkbox" name="rating1" value="1">
Thing 1 
</label>
<!-- edited -->	
</div>
</div>
<div class="label">
<span>Checkboxes<span class="helptext">Help!</span></span>
<div class="field boxlist scroll">
<label>
<input type="checkbox" name="rating1" value="1">
Thing 1 
</label>
<!-- edited -->		
</div>
</div>
<div class="clear"/>
</fieldset>
Lefthand Labels and Columns
Multiple Boxes
Ratings Rate something unimportant from 1-5
Columns of Boxes
 
<fieldset class="leftLabels">
<legend>Lefthand Labels and Columns</legend>	
<div class="label required">
<span>Multiple Boxes</span>
<div class="field columns">
<label>
<input name="cardday" id="day" size="3">
</label>
<label>
<select name="cardmonth" id="cardmonth">
<option value="-1" >-</option>
<option value="01" >01</option>
<option value="02" >02</option>
<!-- edited -->	
</select>
</label>
<label>
<select name="cardyear" id="cardyear">
<option value="-1" >-</option>
<option value="2004" >2004</option>
<option value="2005" >2005</option>
<!-- edited -->
</select>	
</label>	
</div>
</div>
<div class="label">
<span>Ratings <span class="helptext">
Rate something unimportant from 1-5
</span></span>
<div class="field columns">
<label>
<input type="radio" name="rating" value="1">
</label>		
<!-- edited -->	
</div>
</div>
<hr class="clear"/>
<div class="label">
<span>Columns of Boxes</span>
<div class="field fiveCols">
<label>
<input type="checkbox" name="rating1" value="1"> Thing 1 
</label>
<label>
<input type="checkbox" name="rating2" value="2"> Thing 2 
</label>	
<label>
<input type="checkbox" name="rating3" value="3"> Thing 3 
</label>	
<label>
<input type="checkbox" name="rating4" value="4"> Thing 4 
</label>	
<label>
<input type="checkbox" name="rating5" value="5"> Thing 5 
</label>	
<label>
<input type="checkbox" name="rating6" value="6"> Thing 6 
</label>	
<label>
<input type="checkbox" name="rating1" value="1"> Thing 1 
</label>
<label>
<input type="checkbox" name="rating2" value="2"> Thing 2 
</label>	
<label>
<input type="checkbox" name="rating3" value="3"> Thing 3 
</label>	
<label>
<input type="checkbox" name="rating4" value="4"> Thing 4 
</label>	
<label>
<input type="checkbox" name="rating5" value="5"> Thing 5 
</label>	
<label>
<input type="checkbox" name="rating6" value="6"> Thing 6 
</label>			
<label>
<input type="checkbox" name="rating4" value="4"> Thing 4 
</label>	
<label>
<input type="checkbox" name="rating5" value="5"> Thing 5 
</label>	
<label>
<input type="checkbox" name="rating6" value="6"> Thing 6 
</label>
</div>
</div>
<div class="clear"/>
</fieldset>