Is the attribute of a label element good for something?

The for attribute makes a link type between label and input . Then the for has to point to the ID of input .

Another way of using it is that you can do various types of CSS customization by hiding the input default browser for example and using the label itself as the button.

Here is a very 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(http://placeskull.com/40/40)
}
input[type="checkbox"]:checked + label::before {
    content: url(http://placecage.com/40/40)
}

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

See what the official W3C documentation talks about using multiple label s doing for for the same element. link

  

More than one LABEL may be associated with the same control by   creating multiple references via the for attribute.

     

More than LABEL can be associated with the same control, creating    multiple references through the for attribute.

See that you can have more than label with the same value in for , other than ID that only one can. In short you can have multiple for pointing to the same ID . This is very interesting because at certain points you can have buttons that point to the same place, like example a btn at the top of the page and another at the end but that point to the same ID.

Now let's go the best part, if you read this far you deserve it!

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

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

input {
  display: none;
}
input + span {
  color: red;
}
input:checked + span {
  color: blue;
}
label {
        cursor: pointer;
}

<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"> BTN -> Label com <i>for</i> pro checkbox</label><br>
<label for="fbtn"> BTN -> Label com o mesmo <i>for</i> que o anterior</label>

In addition, label is part of the "button" semantics and is essential for screen readers, makes accessibility very easy and helps to mark the buttons. Here is documentation for W3C about this: link

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

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

OBS2: for also exists for element <output> link

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

This functionality is especially useful if it is used in checboxes , botões and radio buttons . In that case you will be able to activate them also by clicking on the texts instead of TER to click on the elements.

Source: link