Whats the right way to label things in a form?

Question

I've seen lots of ways to label things in a form such as <label>, <div>, <span>, etc. Is there a right or wrong answer for this? Are there any advantages/disadvantages to any of these? Thank You

Answer 1

Label is best for accessibility (tab order, screen readers, etc)

See more at: http://www.communitymx.com/content/article.cfm?cid=02310

Answer 2

The proper way to provide a label to a form element is to use <label>:

Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).

For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.

The <label> element is used to specify labels for controls that do not have implicit labels

Since it is a semantic element providing meaning to your markup user agents can make sense of it and tend to helpfully direct clicks on the label to the element itself (very helpful for tiny controls like checkboxes). Also you're providing helpful assistance to people using screen readers or other accessibility features.

You shouldn't use <div> or <span> to actually label an element. For auxiliary help text, however, they might prove useful. But imho you should stick to the semantic capabilities of HTML where possible and sensible. This is such as case in my eyes.

Answer 3

I tend to prefer this:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />

Take a look at what Phil Haack thinks...

Answer 4

The best way is this one :

<label for="anInput">This is the input</label> 
<input type="text" name="anInput" />

This is especially interesting for checkboxes. If you click the label it will check/uncheck the checkbox. If you click on the label of an input field it selects it.

The tag defines a label for an input element.

The label element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the label element, it toggles the control.

The for attribute of the tag should be equal to the id attribute of the related element to bind them together.

via