The issue of the LABEL element at a radio buttons task


Hi there! According to the task, I need to create a set of radio buttons. There is a result:

<form action="#">

<label for=“cat”>

<input id=“cat” type=“radio” name=“cat-dog”>Cat


<label for=“dog”>

<input id=“dog” type=“radio” name=“cat-dog”>Dog


The problem is that I totally cannot understand why <label for=“cat”> is used here. Even if I delete the label element, the buttons work anyway. So, why is necessary? Where does it lead?

Thank you!

The label for attribute will link the label to the element it belongs. What it does in practice is that you can click the text “Cat” in the page instead of clicking directly on the radio button to toggle it. If you remove it and try to click the “Cat” text, you’ll see it won’t toggle the radio button.

The radio button is kinda of small, so it’s good accessibility to allow the user to click on the label.

Eureka! Thank you so much, you helped a lot :slight_smile:

Click on solved icon! And yes id="" for input and for="" there input ids.