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

HTML Web Development Front End Technology

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.

Syntax

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

Following are the examples…

Example

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>

Output

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.

Example

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>