Using for and name attribute together

Question

Earlier I studied that for text type input tag id attribute and for attribute of the label tag should have the same value.

Now I was reading a tutorial and came through this code, here in the case of radio buttons the for and name attribute have the same value, instead of id and for.

And I am aware that id is unique for an element. My first question is then what is the purpose of using the for attribute in the case of radio buttons?

<label for="status">Status:</label>
<input type="radio" id="pending" name="status"> Pending
<input type="radio" id="resolved" name="status"> Resolved
<input type="radio" id="rejected" name="status"> Rejected

My second question is that unlike the text type input tag here id and for attribute do not have the same value. Is it a valid code? If it is valid then what is the purpose of giving the same values to the for and name attribute?

Does this answer your question? [What does "for" attribute do in HTML tag?](https://stackoverflow.com/questions/18432376/what-does-for-attribute-do-in-html-label-tag) — Edric, Jun 12 '21 at 08:40
Label is to select a field. If you're assigning label to radio, each radio must have it's own label. — Sagar V, Jun 12 '21 at 09:03

Quentin · Accepted Answer · 2023-03-13T12:33:18.637

Now I was reading a tutorial and came through this code, here in the case of radio buttons the for and name attribute have the same value, instead of id and for.

This is an error

And I am aware that id is unique for an element. My first question is then what is the purpose of using the for attribute in the case of radio buttons?

The for attribute should have the same value as the id of the radio button it is labelling

My second question is that unlike the text type input tag here id and for attribute do not have the same value. Is it a valid code? If it is valid then what is the purpose of giving the same values to the for and name attribute?

Entirely valid.

The name determines that the key will be when the form data is submitted and groups the radio buttons.

The id is used to uniquely identify it (e.g. for a label).

<label for="status">Status:</label>
<input type="radio" id="pending" name="status"> Pending
<input type="radio" id="resolved" name="status"> Resolved
<input type="radio" id="rejected" name="status"> Rejected

The words to the right of the inputs should be labels here.

The label should be a legend for a fieldset.

<fieldset>
  <legend>Status</legend>
  <input type="radio" id="pending" name="status"> <label for="pending">Pending</label>
  <input type="radio" id="resolved" name="status"> <label for="resolved">Resolved</label>
  <input type="radio" id="rejected" name="status"> <label for="rejected">Rejected</label>
</fieldset>

Note how, in the live demo, you can click the label to trigger the associated radio button. (Aside from the larger click target and conformance to standard UI conventions, this also benefits screen reader & other AT software).

score 0 · Answer 2 · answered Jun 12 '21 at 08:35

That is not the correct use of a label.

The label should be associated with a single control, so in your case you would need a label for each input. And if you want to group them, you can add a fieldset element with a legend to "label" it.

something like

<fieldset>
  <legend>Status:</legend>
  <input type="radio" id="pending" name="status"> <label for="pending">Pending</label>
  <input type="radio" id="resolved" name="status"> <label for="resolved">Resolved</label>
  <input type="radio" id="rejected" name="status"> <label for="rejected">Rejected</label>
</fieldset>

(and you can of-course style it the way you want it to look)

Using for and name attribute together

2 Answers2