What Is the HTML For="" Attribute in <Label>

What is the HTML for= attribute in label ?

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id:

<label for="username">Click me</label>
<input type="text" id="username">

The for attribute associates a <label> with an <input> element; which offers some major advantages:

1. The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

2. You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

<label>Click me <input type="text"></label>

Notes:

One input can be associated with multiple labels.

When a <label> is clicked or tapped and it is associated with a form control, the resulting click event is also raised for the associated control.

Accessibility concerns

Don't place interactive elements such as anchors or buttons inside a label. Doing so, makes it difficult for people to activate the form input associated with the label.

Headings

Placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. If the label's text needs to be adjusted visually, use CSS classes applied to the <label> element instead.

If a form, or a section of a form needs a title, use the <legend> element placed within a <fieldset>.

Buttons

An <input> element with a type="button" declaration and a valid value attribute does not need a label associated with it. Doing so may actually interfere with how assistive technology parses the button input. The same applies for the <button> element.

Ref:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

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.

Read more on Accessibility

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>  

Using the for attribute on an element other than the label

The HTML for attribute is only valid on label and output elements.

See - https://www.w3schools.com/tags/att_for.asp

So to answer your question, that is invalid HTML.

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.

React ignores 'for' attribute of the label element

The for attribute is called htmlFor for consistency with the DOM property API. If you're using the development build of React, you should have seen a warning in your console about this.

where and when to use aria-label?

aria-label to provide an invisible label where a visible label cannot be used.

The purpose of this technique is to provide a label for objects that can be read by assistive technology. The aria-label attribute provides the text label for an object, such as a button. When a screen reader encounters the object, the aria-label text is read so that the user will know what it is.

all html tags support's aria-label area-label attributes can be used with

<button aria-label="Close">X</button>

Should I put input elements inside a label element?

From the W3's HTML4 specification:

The label itself may be positioned before, after or around the
associated control.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

function checkUncheck(el) {  var input = $(el).find("input");  console.log(input);  alert("TESt");  // console.log("input:", input);  // console.log('$(input).parent("div").hasClass("opacity")', $(input).closest("div.config-box").hasClass("opacity"));
  var isClickable = $(input).closest("div.config-box").hasClass("opacity");
  if (isClickable != true) {    if (input.attr("type") == "radio") {      $(el).closest(".form-group").find("input[name='" + input.attr("name") + "']").closest(".img-check").removeClass("check").find('input').prop('checked', false);      $(el).addClass('check').find('input').prop('checked', true).change();    } else {      if ($(el).hasClass("check")) {        $(el).removeClass("check").find("input").prop("checked", false);      } else {        // alert("TEST");        // el.classList.add("check");        $(el).addClass("check").find("input").prop("checked", true);        console.log($(el));      }    }  }}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label class="img-check" for="chassis" onclick="checkUncheck(this)"> <div class="bg-img" style="background-image: url('http://www.fujifilm.com.my/Products/digital_cameras/x/fujifilm_x20/sample_images/img/index/ff_x20_008.JPG'); width: 20%;height: 200px;background-position: center;background-size: cover;"></div>  <input type="checkbox" name="chassis" value="valasdfas1" style="visibility:hidden" class="hidden" autocomplete="off"></label>

@Component({
  encapsulation: ViewEncapsulation.None,
  ...
})