About the reason of connecting <label> and <input> using for attribute in form

only displays Pepperoni , why do we need for attribute to connect and element? What happens if i forget to use for attribute.

there was an answer that if is wrapped within then for attribute is not needed. Still, that doesn’t explain the reason of connecting and . So I’m asking this question.

<label for="pepperoni">Pepperoni</label>
  <input id="pepperoni" name="topping" type="checkbox" value="pepperoni">

Associating a <label> with an <input> element offers some major advantages:

  • The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
  • You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input’s id

^ from MDN, continue reading

1 Like

Thanks! I got it now

1 Like