Virginia's Code Snippets

Fixing the errors in the W3C Before and After Demo for the Survey Page

Fixing Form Instructions

<p>Fields are required if not otherwise noted.</p>

Grouping Radio Buttons & Associating Radio Button with Label

<fieldset>
<legend>Favorite Park</legend>
<p>Which is your favorite city park?</p
<p><input type="radio" name="res" id="nn" value="1"> <label for="nn">None</label></p>
<p><input type="radio" name="res" id="cp" value="2"> <label for="cp">Central Park</label></p>
<p><input type="radio" name="res" id="gp" value="3"> <label for="gp">Grand Park</label></p>
<p><input type="radio" name="res" id="jp" value="4"> <label for="jp">Jurassic Park</label></p>
<p><input type="radio" name="res" id="sp" value="5"> <label for="sp">South Park</label></p>
<p><input type="radio" name="res" id="ot" value="6"> <label for="ot">Other</label></p>
</fieldset>

Giving Select Box Title and Improving Keyboard Usability

<fieldset>
<legend>Greenest City</legend>
<p>Which city do you find is the greenest?</p>
<p>
<select name="cc" id="cc" title="cities of the world">
<option value="0">select a city from this list</option>
<optgroup label="A">
<option value="1">Abu Dhabi, United Arab Emirates</option>
<option value="2">Abuja, Nigeria</option>
<option value="3">Accra, Ghana</option>
. . .
</optgroup>
. . .
</select></p>
</fieldset>

Meaningful Reading Sequence

<fieldset>
<legend>Free Newsletter (optional)</legend>
<p>To receive our free newsletter fill in the following details:</p>
<p> <label for="mr">Mr. <input type="radio" name="t" id="mr" value="mr" title="title"></label>
<label for="mrs">Mrs. <input type="radio" name="t" id="mrs" value="mrs" title="title"></label>
<label for="n">Name: <input type="text" name="n" id="n" ></label></p>
<p><label for="em">eMail Address: <br><input type="text" name="em" id="em" size="20"></label></p>
<p><label for="ev">Retype eMail: <br><input type="text" name="ev" id="ev" size="20"></label></p>
</fieldset>

Properly Structured Table Data

<table>
<caption>What is your favorite and least favorite organ?</caption>
<thead>
<tr>
<th></th>
<th scope="col">Lung</th>
<th scope="col">Pancreas</th>
<th scope="col">Spleen</th>
<th scope="col">Liver</th>
<th scope="col">Skin</th>
<th scope="col">Brain</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">hate it</th>
<td>4</td>
<td>10</td>
<td>4</td>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
. . .
</tbody>
</table>