Opened 6 years ago

Closed 4 years ago

#13401 closed Bug (wontfix)

Forms RadioInput produces invalid HTML

Reported by: pajatso Owned by: nobody
Component: Forms Version: 1.1
Severity: Normal Keywords:
Cc: m@… Triage Stage: Design decision needed
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

django.forms RadioInput widget produces invalid HTML. The input tag is rendered inside the label tag which is semantically invalid. It makes it difficult to apply styles to the RadioInput and RadioSelect (multiple radioinputs) widget. The problem can be fixed by modifying the last row from RadioInput widgets unicode method:

original:
return mark_safe(u'<label%s>%s %s</label>' % (label_for, self.tag(), choice_label))

fixed:
return mark_safe(u'<label%s>%s</label>%s' % (label_for, choice_label, self.tag()))

Change History (9)

comment:1 Changed 6 years ago by Matt McClanahan

Needs documentation: unset
Needs tests: unset
Patch needs improvement: unset

Not marking it invalid, but placing an input within a label is valid. It's documented behavior for implicitly associating a label with a form control. http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL

comment:2 Changed 6 years ago by Russell Keith-Magee

Triage Stage: UnreviewedDesign decision needed

The current syntax is legal HTML (HTML4 and XHTML), so that isn't a reason to change.

The styling issue is an interesting one. I can see how the styling could be easier if we use the explicit form of <label>. However, there is also a significant body of code out there that is styled using the current markup. Just changing the markup isn't really an option, as existing sites will be affected by the change.

There is a larger design issue to address here.

comment:3 Changed 6 years ago by Ramiro Morales

#14776 reports this again and asks for the same treatment for the CheckboxSelectMultiple widget.

comment:4 Changed 6 years ago by JMagnusson

Cc: m@… added

Could this be implemented as an option? Something like this:

some_field = forms.ModelChoiceField(queryset=..., widget=forms.RadioSelect(label_position='right'))

Available choices:

  • 'around' (default)
  • 'left'
  • 'right'

comment:6 Changed 6 years ago by Julien Phalip

Severity: Normal
Type: Bug

See #15667 for a proposal to refactor the whole form templating system.

comment:7 Changed 5 years ago by Aymeric Augustin

UI/UX: unset

Change UI/UX from NULL to False.

comment:8 Changed 5 years ago by Aymeric Augustin

Easy pickings: unset

Change Easy pickings from NULL to False.

comment:9 Changed 4 years ago by Aymeric Augustin

Resolution: wontfix
Status: newclosed

This change is backwards-incompatible. The link in comment 5 provides a workaround.

The long term solution is a template-based form rendering system, which has been considered for a long time but only exists as an external app (floppyforms) at this time.

Note: See TracTickets for help on using tickets.
Back to Top