revision:
The <label> tag defines a label for several HTML elements : <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime-local">, <input type="email">, <input type="file">, <input type="month">, <input type="number"> <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel"> <input type="text">, <input type="time">, <input type="url">, <input type="week">, <meter>, <progress>, <select>
Proper use of labels with the elements above will benefit: screen reader users (will read out loud the label, when the user is focused on the element) and users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).
The "for" attribute of <label> must be equal to the"id" attribute of the related element to bind them together. A label can also be bound to an element by placing the element inside the <label> element.
for ; value: element_id;
specifies the "id" of the form element the label should be bound to.
form ; value: form_id;
specifies which form the label belongs to.
<label> . . . </label>
Click on one of the text labels to toggle the related radio button:
Codes:
<p class="spec">Click on one of the text labels to toggle the related radio button:</p>
<form style="margin-left:4vw;" action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
Codes:
<style>
.preference {display: flex; justify-content: space-between; width: 25%; margin: .5vw;}
</style>
<div>
<div class="preference" style="margin-left: 4vw;">
<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">
</div>
<div class="preference" style="margin-left: 4vw;">
<label for="peas">Do you like peas?</label>
<input type="checkbox" name="peas" id="peas">
</div>