Forms
Using Labels
<label> is a programmatic assignment – linking the form field with the labeling text. This is the best way to build accessible forms. This connection is made using the “for” attribute on the <label> element and the “id” attribute on the control.
Use the <label> element to label these form controls
- Text Fields
- Radio Buttons
- Checkboxes
- Select Menus
Each id attribute must be unique and must start with an alphabetical character or underscore (id must not start with a numeric character). The id attribute should not be confused with the name attribute. name is the variable name sent to the server on submission of a form and does not need to be unique. id is used for client-side identification only and is not sent to the server.
Caution:
Submit and Reset buttons are already associated with their label – no
need to use a <label> tag. AssistiveTechnology will read the value
attribute.
Example:
<input type=”submit” value=”Submit the Form”>
Example:
<form action="mailto:somebody@akc.org">
<label for="namelabel">
Name
</label>
<input name="name" id="namelabel" size="30" /> <br
/>
<label for="dognamelabel">
Dog's Name
</label>
<input name="dogname" id="dognamelabel" size="30" /> <br
/>
<label for=”breed”>
Dog's Breed
</label>
<input name="dogbreed" id=”breed” size="30" /> <br
/>
<input type="submit" value="Submit" />
</form>
Remember: “for” and “id” should be the same text.