[Django] #27250: Confusing <label> assignment with CheckboxSelectMultiple
Django
----------------------------+------------------------------------------
Reporter: lamda | Owner: nobody
Type: Bug | Status: new
Component: Forms | Version: 1.10
Severity: Normal | Keywords: CheckboxSelectMultiple label
Triage Stage: Unreviewed | Has patch: 0
Easy pickings: 0 | UI/UX: 0
----------------------------+------------------------------------------
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>
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/27250>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: lamda | Owner: nobody
Type: Bug | Status: new
Component: Forms | Version: 1.10
Keywords: | Triage Stage:
CheckboxSelectMultiple label | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by charettes):
* needs_better_patch: => 0
* needs_tests: => 0
* needs_docs: => 0
Comment:
Keeping the label but removing the `for` attribute seems like safer option
to me.
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:1>
Django
Reporter: lamda | Owner: nobody
Type: Bug | Status: new
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
CheckboxSelectMultiple label |
Has patch: 0 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 0
Changes (by claudep):
* version: 1.10 => master
* stage: Unreviewed => Accepted
Comment:
+1 for removing the `for` attribute.
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:2>
Django
Reporter: Daniel Lamprecht | Owner:
| MartinArroyo
Type: Bug | Status: assigned
Component: Forms | Version: master
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
CheckboxSelectMultiple label |
Has patch: 0 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 0
Changes (by MartinArroyo):
* owner: nobody => MartinArroyo
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:3>
Django
Reporter: Daniel Lamprecht | Owner:
| MartinArroyo
Type: Bug | Status: assigned
Component: Forms | Version: master
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
CheckboxSelectMultiple label |
Has patch: 0 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 0
Changes (by MartinArroyo):
* needs_tests: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:4>
Django
Reporter: Daniel Lamprecht | Owner:
| MartinArroyo
Type: Bug | Status: assigned
Component: Forms | Version: master
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
CheckboxSelectMultiple label |
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham):
* needs_better_patch: 0 => 1
* has_patch: 0 => 1
* needs_tests: 1 => 0
Comment:
[https://github.com/django/django/pull/7449 PR] with some comments for
improvement.
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:5>
Django
Reporter: Daniel Lamprecht | Owner:
| MartinArroyo
Type: Bug | Status: assigned
Component: Forms | Version: master
Severity: Normal | Resolution:
Keywords: | Triage Stage: Accepted
CheckboxSelectMultiple label |
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham):
* needs_better_patch: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:6>
Django
Reporter: Daniel Lamprecht | Owner:
| MartinArroyo
Component: Forms | Version: master
Severity: Normal | Resolution: fixed
Keywords: | Triage Stage: Accepted
CheckboxSelectMultiple label |
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham <timograham@…>):
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"abd434059e1aaff35bc848998ad2335c630ba434" abd43405]:
{{{
#!CommitTicketReference repository=""
revision="abd434059e1aaff35bc848998ad2335c630ba434"
Fixed #27250 -- Removed 'for ="..."' from CheckboxSelectMultiple's
<label>.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/27250#comment:7>