Sample Form 5

Examples of check boxes. Note that there are two sets of boxes. The spacing/grouping is not what connects the boxes. It's the name given to the various buttons.

The label for the button is provided as text. The values are what a web app would get to indicate the choice. (Notice that I used a single word for each.) In this case, the user may select 0 or all of the boxes, so the web app gets a list of the values selected.

I also selected better names for the groups this time. Names and IDs should always be meaningful. In the last example, I used group1 and group2 just to emphaisize the grouping effect of the name.

Salt
Pepper
Hot Sauce

Sugar
Brown Sugar
Artificial Sweetener

---

The HTML used to create the form above:

<form>
<p>
  <input type="Checkbox" name="condiments" value="salt">Salt<br>
  <input type="Checkbox" name="condiments" value="pepper">Pepper<br>
  <input type="Checkbox" name="condiments" value="hotSauce">Hot Sauce
</p>
<p>
  <input type="Checkbox" name="sweetener" value="sugar">Sugar<br>
  <input type="Checkbox" name="sweetener" value="brownSugar">Brown Sugar<br>
  <input type="Checkbox" name="sweetener" value="subst">Artificial Sweetener<br>
</p>
</form>