Creating Forms
Labels and Radio Buttons
If you want your page to be the Cadillac of Web pages, as accessible as it is well crafted, you should use the <label> tag in your forms. The simplest way to use it is to wrap the tag around an input field and its corresponding text, like so:
<label> Breaking News <input type="checkbox" name="newsletter1" value="breaking_news" /></label>
In some (but not all) browsers, the user will now be able to select the “Breaking News” option by clicking either on the words “Breaking News” or the checkbox itself:
When applied to a text field, the label tag has no visible effect for most Web users. But labeling your form elements will help identify parts of a page for blind or disabled users with special “screen reading” browsers.
Radio buttons
Are you male or female? Which age group do you belong to? For questions with only one possible answer, your form needs “radio buttons” – input tags with a type attribute of “radio.”
The radio button tag is very similar to the checkbox, with two differences. First of all, all radio buttons for a given question must have the same name attribute. This is how the browser knows to group the radio buttons together under the same question. In the example below, the options have different values, but both have the name “gender.”
<label>Male <input type="radio" name="gender" value="male" /></label><br /> <label>Female <input type="radio" name="gender" value="female" /></label>
Second, you should always indicate which radio button is initially chosen, using the checked attribute.
<label>Male <input type="radio" name="gender" value="male" /> </label><br /> <label>Female <input type="radio" name="gender" value="female" checked="checked" /></label>
On a Web page, your radio button code will look like this:
Yes, you do still say “checked,” even though a radio button is more likely “pressed” or “selected.”
Try it Yourself
Make your own tweaks or additions to the code in the left box below, then click “Show Changes” to see the results in the right box.