Confusing <label> assignment with CheckboxSelectMultiple

[Daniel Lamprecht]

Using CheckboxSelectMultiple leads to a (in my opinion) confusing assignment of the <label> in the generated HTML. The general label for the choices refers to the first element in the list. Please see this example:

forms.py:

class TestForm(forms.Form):
    days = forms.MultipleChoiceField(
        widget=forms.CheckboxSelectMultiple,
        choices=[('1', 'DayOne'), ('2', 'DayTwo')],
    )

views.py:

def form(request):
    return render(request, 'form.html', {'form': forms.TestForm()})

form.html:

<form method="post">
  <ul>
    {{ form.as_ul }}
  </ul>
  <button type="submit">Submit</button>
</form>

Resulting HTML (prettified):

<form method="post">
  <ul>
    <li>
      <label for="id_days_0">Days:</label>
      <ul id="id_days">
        <li>
          <label for="id_days_0"><input id="id_days_0" name="days" type="checkbox" value="1" /> DayOne</label>
        </li>
        <li>
          <label for="id_days_1"><input id="id_days_1" name="days" type="checkbox" value="2" /> DayTwo</label>
        </li>
      </ul>
    </li>
  </ul>
  <button type="submit">Submit</button>
</form>

This means that clicking on "Days" selects the first day. I would suggest to remove the "<label> element and only keep the label text itself.

Compare this to the HTML when not having the CheckboxSelectMultiple widget, where clicking on "Days" simply selects the <select> element:

<form method="post">
  <ul>
    <li>
      <label for="id_days">Days:</label>
      <select multiple="multiple" id="id_days" name="days" required>
        <option value="1">One</option>
        <option value="2">Two</option>
      </select>
    </li>
  </ul>
  <button type="submit">Submit</button>
</form>

[Simon Charette]

Keeping the label but removing the for attribute seems like safer option to me.

[Claude Paroz]

+1 for removing the for attribute.

[Tim Graham]

​PR with some comments for improvement.

[Tim Graham <timograham@…>]

In abd43405:

Fixed #27250 -- Removed 'for ="..."' from CheckboxSelectMultiple's <label>.