HTML Tag: <label>
There's an interesting HTML tag that I just learned about:
Uses:
<label>
First Name:
<input type="text" name="firstname" />
</label>
First Name:
<input type="text" name="firstname" />
</label>
OR
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />
<input type="text" name="firstname" id="firstname" />
The label tag associated the text inside to the input field. There are two advantage to this.
- For a disabled user, the screen reader can read to the visitor what this field is asking for.
- The standard user can click on the label which will bring focus to the input field, similar to many desktop applications.
Internet Explorer will only support the second example above to allow clicking of the label. Also think of the advantage of styling the label tag in CSS. So I'd recommend using the second example above. The for attribute references the id attribute in the input tag.
A good video to watch: Creating Attractive, Usable, and Accessible Forms. This was a presentation at Adobe Max 2008.
Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
[Add Comment]
[Subscribe to Comments]
If you haven't tried it yet, check out using label for radio butons and check boxes. Instead of having to click on the radio button or check box to toggle, you can click on the label, which is much easier.
# Posted By Barry Lemon
| 1/23/09 6:42 PM
Yeh, once you start using the <label> tag along with a css form layout - you'll never need to put a form in a table again. I love label :-)
# Posted By Brian Love
| 1/24/09 1:24 PM
[Add Comment]
