Is the for attribute of a label element good for something?

Question

I see several code examples where the attribute "for" is set in Labels.

But in practice, whether or not this attribute influences something on the page?

Ex:

<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>

Answer 1

The attribute for kind of link between the label and the input. Soon the for has to point to the ID of the input.

Another form of use is that you can do various types of customization by CSS hiding the input browser default for example and using own label as if it were the button.

Here’s a pretty basic example of what you can do with just CSS and interacting with label

label:hover {
    cursor: pointer;
    text-decoration: underline;
}
input[type="checkbox"]{
    display: none;
}
input[type="checkbox"] + label::before {
    content: url(https://unsplash.it/40/40)
}
input[type="checkbox"]:checked + label::before {
    content: url(https://placekitten.com/40/40)
}

<input type="checkbox" id="teste">
<label class="desc animate" for="teste">Troca</label>

See what the official documentation W3C talks about the use of several labels making the for for the same element. https://www.w3.org/TR/html401/interact/forms.html#adef-for

More than one LABEL may be Associated with the same control by Creating Multiple References via the for attribute.

More than one LABEL may be associated with the same control, creating several references using the attribute for.

See that you can have more than one label of the same value in for, other than ID that only one can. Summing up you can have several for pointing to the same ID. This is very interesting because at certain points you can have buttons that point to the same place, such as a btn at the top of the page and another at the end but that point to the same ID.

Now let’s get to the best part, if you read up here you deserve!

Using for example a CSS rule that is input:checked + elemento {} you can interact with the styles that came before the label. It is as if you could change the style of the Father interacting with the Son using an input:checked as toggle!

To better understand see the example below. A label comes at the end, but it interacts like span that comes above it!

input {
  display: none;
}
input + span {
  color: red;
}
input:checked + span {
  color: blue;
}
label {
  cursor: pointer;
  border: 1px solid;
  display: inline-block;
  margin: 10px 0;
}

<div>div1
  <div>&nbspdiv2
    <div>&nbsp&nbspdiv3
      <input type="checkbox" id="fbtn" name="fbtn"> <!-- input que faz a ancora de estilo -->
      <span>Esse texto vai trocar de cor mesmo vindo antes do label que o ativa</span>
    </div>
  </div>
</div>
<hr>
<b>esse conjunto de label troca a cor do texto que vem antes dele!</b><br>
<label for="fbtn"> Label -> com <i>for</i> pro checkbox</label><br>
<label for="fbtn"> Label -> com o mesmo <i>for</i> que o anterior</label>

In addition to label is part of the semantics of "buttons" and is essential for screen readers, greatly facilitates accessibility and helps to mark buttons. Here is a documentation of W3C about that: https://www.w3.org/WAI/tutorials/forms/labels/

Speaking of UX and mobile - The for is also very good for websites and systems mobile, where the radio and the checkbox are small and you can mark them by clicking on label without having to zoom in, or depending on the user-agent of the mobile browser.

OBS1: the for also link to label to other elements of form as input type="text" / type="number" / type="password" etc

OBS2: the for also exists for the element <output> https://www.w3schools.com/tags/tag_output.asp

Answer 2

The tag <label> if associated with a form element allows you to "click" on that element by clicking on its label.

This feature is especially useful if used in checboxes, botões and radio buttons. In this case you can also trigger them by clicking on the text instead of HAVING to click on the elements.

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