Add default "required" css classes to form labels

[Haisheng HU]

If a form field is required, add default "required" css class to its label. The output will be as follows.

<tr>
<th><label for="id_name" class="required">Name:</label></th>
<td><input id="id_name" type="text" name="name" value="1" maxlength="256" /></td>
</tr>

[Haisheng HU]

patch file for 1.3.1

[anonymous]

I'm added path, docs and corrected tests for a path at this pull request ​https://github.com/django/django/pull/305

[Florian Apolloner]

What's the rationale for setting this on the label on not on the actual input field (or even both)?

[Haisheng HU]

In most cases, the label of required fields should be in bolded style or accompanied by an asterisk, while the actual input field left as usual.

Replying to apollo13:

What's the rationale for setting this on the label on not on the actual input field (or even both)?

[Claude Paroz]

Note that there is already a required_css_class settable attribute for forms, documented here: ​https://docs.djangoproject.com/en/dev/ref/forms/api/#styling-required-or-erroneous-form-rows (see also #3512)

So when a form is output with as_p, as_ul or as_tr, the row itself is already marked with the required_css_class value, hence the CSS to style them is trivial. However, the problem remains when the field is output with dict access ({{ form.myfield.label_tag }}: {{ form.myfield }}). See for example the TODO comments in auth/user/change_password.html template.

I will propose a new patch that only set the required_css_class in this latter case.

The fact that required_css_class is not set by default on forms might be the subject of another ticket...

[Claude Paroz]

Set required_css_class on label

[Claude Paroz]

Replying to claudep:

The fact that required_css_class is not set by default on forms might be the subject of another ticket...

This is tracked in #14322

[Tim Graham]

Patch no longer applies cleanly.

[ANUBHAV JOSHI]

Please see this PR:
​https://github.com/django/django/pull/2390

[Florian Apolloner]

I think we should use the "required" attribute from HTML5 and don't set any css class.

[Claude Paroz]

Florian, would adding the required attribute on the widget help styling the label (common use case) ? Of course, adding the HTML5 required attribute is a very good idea, but I'm not sure it solves this issue.

[loic84]

An example of styling a label using the :required pseudoselector:

​http://html5doctor.com/css3-pseudo-classes-and-html5-forms/#required-and-optional-elements

[Claude Paroz]

Thanks Loïc. Unfortunately, these seems to work only when the label follows the input, not the reverse :-(

[loic84]

True, CSS can't match backwards, it'd be workable from the <label><input></label> syntax, but that's not very practical.

One day we'll hopefully be able to pick the actual subject of a CSS selector... (cf. ​http://dev.w3.org/csswg/selectors4/#subject)

Personally I'm a bit reluctant adding styling information from the Python side, this things IMO belong to the template layer, but in this specific case, required_css_class is optional so I guess it's not that bad.

[Tim Graham <timograham@…>]

In 416a8580232075d569cf3c386a97067884c67a60:

Fixed #17922 -- Added required_css_class to form label.

Thanks hanson2010 for the suggestion.

[Tim Graham]

I created #22329 as a follow-up to this ticket to address the TODOs in the admin templates that Claude mentioned in comment 6.

[Tim Graham <timograham@…>]

In ed4c2e1c0d9e43c09767b02fd8b4bd74a5dfe512:

Fixed #22329 -- Used label_tag() in some admin auth templates.

refs #17922.