How to specify which form element a calculation is bound to with HTML?

The HTML label tag enables us to click on the label, which will be treated as if we had clicked on the appropriate input type. The HTML can accept several input kinds, such as a radio button or checkbox. The for attribute provides the form element to which a label is bound.


<label for="element_id"> Label Content </label>

Following are the examples…


In the following example if we click on the student the respected radio button will be selected,increasing the selection area.this is done with the help of for attribute.

<!DOCTYPE html> <html> <body> <h1>Click On Labels To Select Radio Button</h1> <form> <label for="Student">Student</label> <input type="radio" name="Category" id="Student" value="Student" /> <br /> <label for="WorkingProfessional"> Working Professional </label> <input type="radio" name="Category" id="WorkingProfessional" value="WorkingProfessional"/> <br /> <label for="Retired">Retired</label> <input type="radio" name="Category" id="Retired" value="Retired" /> <br /> <br /> <input type="submit" value="Submit" /> </form> </body> </html>


When the script gets executed, the window will open in a browser with different labels, each containing a radio button in front of them to increase their selection area when selected.


Another example using the for attribute can be seen as follows −

<!DOCTYPE html> <html> <body> <p>Education:</p> <form action=""> <label for = "graduate">Graduate</label> <input type = "radio" name = "education" id = "graduate" value = "graduate"><br> <label for = "ugraduate">Under-graduate</label> <input type = "radio" name = "education" id = "ugraduate" value = "ugraduate"><br> <input type = "submit" value = "Submit"> </form> </body> </html>


On executing the script above, the output achieved is as follows −