Forms RadioInput produces invalid HTML

[pajatso]

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()))

[Matt McClanahan]

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

[Russell Keith-Magee]

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.

[Ramiro Morales]

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

[JMagnusson]

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'

[Ramiro Morales]

See also #6388, e.g. ​http://code.djangoproject.com/ticket/6388#comment:9

[Julien Phalip]

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

[Aymeric Augustin]

Change UI/UX from NULL to False.

[Aymeric Augustin]

Change Easy pickings from NULL to False.

[Aymeric Augustin]

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.