Survey Form - Need help with the form labels

Hey.

Need some help with how labels target their respective form fields.

This is my code:

      <div class="rowTab">
        <div class="labels">
          <label for="userReception">How long did you wait in the reception area beyond your scheduled appointment time?</label>
        </div>
        <div class="rightTab">
          <ul style="list-style: none;">
            <li class="radio"><label>0 to 5 minutes<input name="userReception" value="1"  type="radio" class="userReception" ></label></li>
            <li class="radio"><label>5 to 20 minutes<input name="userReception" value="2"  type="radio" class="userReception" ></label></li>
            <li class="radio"><label>20 to 40 minutes<input name="userReception" value="3"  type="radio" class="userReception" ></label></li>
            <li class="radio"><label>Longer<input name="userReception" value="4"  type="radio" class="userReception" ></label></li>
          </ul>
        </div>
      </div>

Was wondering why the first label has the for="userReception" and yet the labels within the list don’t. Should all labels have a for=" " attribute?

The value of the for attribute must be the same as the value of the id attribute of the form control

1 Like

Not all the labels need the for="" attribute. Labels that wrap their respective input elements don’t need the for=""

1 Like

I think it’s not necessary to have a for attribute if the input element is nested within the label element. However if the label and input elements aren’t nested, then you must include the for attribute. The id attribute of the corresponding input element must match the value of the for attribute of the label element as mentioned above.

2 Likes

Thank you @nibble and @mphojele

Much appreciated.

1 Like

Well, good luck @KarenWangari2017 , in your learning endeavor

1 Like

From my understanding the “for” attribute in the is for accessibility. While everything will still work without it, I would imagine people that make websites for a living would say it is required. (I’m not in the industry personally).

How to most efficiently give a “for” to 0 to 5 minutes and corresponding “id” to the , I am not sure. Based on the lessons, it’s used by screen-readers to read each option. I do not know the best practices for accessibility, so hopefully someone else can help.

https://www.freecodecamp.org/learn/responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element

1 Like