Why Use <Label>

Is it important to use label in HTML?

It's important for a number of reasons:

Clicking the label focuses on the

text field, which is something a lot
of users expect.
It's helpful for the accessibility reasons.
How else is the user going to know which field is which? You could use
just text or a span or something, but
why would you?
It leads to a more semantic markup.

What does for attribute do in an HTML label tag?

The <label> tag allows you to click on the label, and it will be treated like clicking on the associated input element. There are two ways to create this association:

One way is to wrap the label element around the input element:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

The other way is to use the for attribute, giving it the ID of the associated input:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

This is especially useful for use with checkboxes and buttons, since it means you can check the box by clicking on the associated text instead of having to hit the box itself.

Read more about the <label> element on MDN.

Associating text with an input is very important for accessibility, as it provides an accessible name for the input, so that assistive technology can provide it to users with disabilities. A screen reader would read the label text when the user focusses the input. You could also tell your voice command software to focus that input, but it needs a (visible) name for that.

Why should you use the label tag and 'for' attribute?

The label tag supports with a click the focus on the input element where id attribute equals labels for attribute.
If you have e.g. a checkbox you can choose this one also with a click on the label.

Example:

<input type="checkbox" value="1" id="myCheckbox"/>

// A click here set the focus on the according checkbox without javascript things 
// And it's easier to select than a small checkbox element 
<label for="myCheckbox">My Checkbox</label>

What is the HTML label tag used for?

The html <label> tag creates a label for an <input> element. When the <label> element is clicked, it toggles the control for the input element. For example, the label for an <input> element with type="text" will create focus on the <input> element when clicked. For the label to work, its for attribute must equal the id of the <input> element it is labeling.

For more information, read this: https://www.w3schools.com/tags/tag_label.asp

When should the label element be used?

The <label> element should be used with form fields: most types of <input>, <select> and <textarea>. If has a for attribute that holds the id of the related element. So, if you click the label, the related element is focused.

Example Usage at Jsbin

<label for="textinput">Enter data here</label>
<input id="textinput>"

<input type="checkbox" id="checkbox">
<label for="checkbox">What this box does</label>

<input type="radio" id="radio_opt1" name="radiogroup">
<label for="radio_opt1">Option description</label>
<input type="radio" id="radio_opt2" name="radiogroup">
<label for="radio_opt2">Option description</label>

<label for="select">Select an option</label>
<select id="select">
    <option>Some option</option>
</select>

<label for="textarea">Enter data into the textarea</label>
<textarea id="textarea"></textarea>

In <optgroup> elements, there is a label attribute, which is not the same as the label elements, although its function is similar: identifying a certain group of options:

<select>
    <optgroup label="First group">
        <option>Some option</option>
    </optgroup>
    <optgroup label="First group">
        <option>Some option</option>
    </optgroup>
</select>

what the meaning of FOR in a label tag?

The for attribute specifies which form element the label is bound to.

The label element allows the user to give focus to a form element by clicking on an associate label. If you do not use the for attribute, this association will not be made.