Opened 5 years ago

Closed 3 years ago

Last modified 3 years ago

#17922 closed New feature (fixed)

Add default "required" css classes to form labels

Reported by: Haisheng HU Owned by: ANUBHAV JOSHI
Component: Forms Version: master
Severity: Normal Keywords: sprint2013
Cc: hanson2010@…, Florian Apolloner, d1fffuz0r@… Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

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>

Attachments (2)

base_form_label_class_attr.diff (636 bytes) - added by Haisheng HU 5 years ago.
patch file for 1.3.1
17922-2.diff (1.9 KB) - added by Claude Paroz 4 years ago.
Set required_css_class on label

Download all attachments as: .zip

Change History (21)

Changed 5 years ago by Haisheng HU

patch file for 1.3.1

comment:1 Changed 4 years ago by Luke Plant

Needs documentation: set
Needs tests: set
Triage Stage: UnreviewedAccepted
Type: UncategorizedNew feature

comment:2 Changed 4 years ago by anonymous

Version: 1.3master

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

comment:3 Changed 4 years ago by Florian Apolloner

Cc: Florian Apolloner added

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

comment:4 in reply to:  3 Changed 4 years ago by 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)?

comment:5 Changed 4 years ago by Roman Gladkov

Cc: d1fffuz0r@… added

comment:6 Changed 4 years ago by Claude Paroz

Needs documentation: unset
Needs tests: unset

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

Changed 4 years ago by Claude Paroz

Attachment: 17922-2.diff added

Set required_css_class on label

comment:7 in reply to:  6 Changed 4 years ago by 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

comment:8 Changed 4 years ago by Bas Peschier

Keywords: sprint2013 added
Owner: changed from nobody to Bas Peschier
Status: newassigned

comment:9 Changed 3 years ago by Tim Graham

Patch needs improvement: set

Patch no longer applies cleanly.

comment:10 Changed 3 years ago by ANUBHAV JOSHI

Owner: changed from Bas Peschier to ANUBHAV JOSHI

comment:11 Changed 3 years ago by Florian Apolloner

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

comment:12 Changed 3 years ago by 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.

comment:13 Changed 3 years ago by loic84

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

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

comment:14 Changed 3 years ago by Claude Paroz

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

comment:15 Changed 3 years ago by 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.

comment:16 Changed 3 years ago by ANUBHAV JOSHI

Patch needs improvement: unset

comment:17 Changed 3 years ago by Tim Graham <timograham@…>

Resolution: fixed
Status: assignedclosed

In 416a8580232075d569cf3c386a97067884c67a60:

Fixed #17922 -- Added required_css_class to form label.

Thanks hanson2010 for the suggestion.

comment:18 Changed 3 years ago by 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.

comment:19 Changed 3 years ago by Tim Graham <timograham@…>

In ed4c2e1c0d9e43c09767b02fd8b4bd74a5dfe512:

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

refs #17922.

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