Opened 6 years ago

Closed 3 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


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:

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

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 mattmcc

  • 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.

comment:2 Changed 6 years ago by russellm

  • Triage Stage changed from Unreviewed to Design 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 5 years ago by ramiro

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

comment:4 Changed 5 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 5 years ago by julien

  • Severity set to Normal
  • Type set to Bug

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

comment:7 Changed 4 years ago by aaugustin

  • UI/UX unset

Change UI/UX from NULL to False.

comment:8 Changed 4 years ago by aaugustin

  • Easy pickings unset

Change Easy pickings from NULL to False.

comment:9 Changed 3 years ago by aaugustin

  • Resolution set to wontfix
  • Status changed from new to closed

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