Why use <label>?

From a presentation perspective, if I write a text between a <l开发者_运维知识库abel> tag it looks identical as to if I hadn't.

So, why do we use this tag at all?

HTML is not about presentation. It is a way of describing data. If you have some text that represents a label for an input, you wrap it in label tags not for presentation but because that's what it is. Without the label tag, that text is almost meaningless. With the label tag and its for attribute (or not*) you are providing meaning and structure and forming a relationship between your markup that can be better understood by computers/parsers/browsers/people.

* you don't necessarily need the for if you wrap the label around the input:

<label>My input
  <input type="text" id="my-input" />
</label>

The for attribute of a label element corresponds to the id attribute of an input element. If you click the label, it puts focus on the input box.

Example:

<input type="checkbox" id="agree" /> 
<label for="agree">I agree with the Terms and Conditions</label>

See this in action.

If you click on the text, it checks the box.

When you click on the label, the focus goes to the related input. Very handy for checkboxes when it is hard to hit the small rectangle.

The HTML <label> tag has one special feature: It allows you to provide a for attribute which links the label to an input field or other control, such that when the user clicks on the label, it is as if he clicked on the control.

eg:

<label for='mycontrol'>Label text</label> <input type='checkbox' name='mycontrol' id='mycontrol' value='1'>

This would mean that when the user clicks on the 'Label text', the checkbox would be toggled.

This is useful for accessibility, general usability, and also allows some tricks such as making a toggle control that doesn't look like a checkbox, but does contain one behind the scenes.

But aside from this for feature, the <label> element is basically the same as any other HTML element.

If you're not going to use the for attribute, it may still be correct to use a <label> element, for semantic reasons.

HTML tags are meant to convey special meaning to users of various categories. Here is what label is meant for:

1. For people with motor disabilities (also for general mouse users) Correctly used label tags can be clicked to access the associated form control. Eg. Instead of particularly clicking the checkbox, user can click on more easily clickable label and toggle the checkbox.

2. For visually-challenged users Visually challenged users use screen-readers that reads the associated label tag whenever a form control is focused. It helps users to know the label which was otherwise invisible to them.

Read more about labelling here

From HTML label tag:

"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."

Nothing from presentation point of view. Lable tag is used for defining label for an input element. From the semantic point of view, it should not be used for defining text.

If you don't use tag then you will have to click on the exact tiny circular space to select an option.

But,if you use tag then you will just have to click anywhere on the text(or the tiny circular blank space) to select an option.

NOTE:-The tag just bound the small circular blank area with the text associated with it. Thats it.