forms for the kids

checkboxes.html

 <div class="groupControl">
    <div class="indicator">Favourite things</div>
    <fieldset>
        <legend>Gender</legend>
        <div class="control firstControl">
        	<input type="checkbox" class="checkbox" value="male" name="thing" id="thing">
        	<label for="thing">Thing</label>
        </div>
        <div class="control">
            <input type="checkbox" class="checkbox" value="female" name="thing" id="thing1">
        	<label for="thing1">Thing 2</label>
        </div>
        <div class="control">
            <input type="checkbox" class="checkbox" value="other" name="thing" id="thing2">
        	<label for="thing2">Thing 3</label>
        </div>
    </fieldset>
</div>

radios.html

 <div class="groupControl">
    <div class="indicator">Gender</div>
    <fieldset>
        <legend>Gender</legend>
        <div class="control firstControl">
        	<input type="radio" class="radio" value="male" name="gender" id="gender">
        	<label for="gender">Male</label>
        </div>
        <div class="control">
            <input type="radio" class="radio" value="female" name="gender" id="gender1">
        	<label for="gender1">Female</label>
        </div>
        <div class="control">
            <input type="radio" class="radio" value="other" name="gender" id="gender2">
        	<label for="gender2">Other WTF?</label>
        </div>
    </fieldset>
</div>

<!--
Notes:

1. The `id` of the first radio control MATCHES the `name` of the radio control
2. All radio controls within the same group have the same `name`
3. The `for` attribute for the label matches the id of the corresponding radio control
4. All subsequent radio controls have suffixed `id` attributes and again the label `for` attribute matches
-->