Opened 3 years ago

Closed 16 months ago

Last modified 15 months ago

#17922 closed New feature (fixed)

Add default "required" css classes to form labels

Reported by: hanson2010 Owned by: anubhav9042
Component: Forms Version: master
Severity: Normal Keywords: sprint2013
Cc: hanson2010@…, apollo13, 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 hanson2010 3 years ago.
patch file for 1.3.1
17922-2.diff (1.9 KB) - added by claudep 3 years ago.
Set required_css_class on label

Download all attachments as: .zip

Change History (21)

Changed 3 years ago by hanson2010

patch file for 1.3.1

comment:1 Changed 3 years ago by lukeplant

  • Needs documentation set
  • Needs tests set
  • Patch needs improvement unset
  • Triage Stage changed from Unreviewed to Accepted
  • Type changed from Uncategorized to New feature

comment:2 Changed 3 years ago by anonymous

  • Version changed from 1.3 to master

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

comment:3 follow-up: Changed 3 years ago by apollo13

  • Cc apollo13 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 3 years ago by hanson2010

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 3 years ago by d1ffuz0r

  • Cc d1fffuz0r@… added

comment:6 follow-up: Changed 3 years ago by claudep

  • 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 3 years ago by claudep

Set required_css_class on label

comment:7 in reply to: ↑ 6 Changed 3 years ago by claudep

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 2 years ago by bpeschier

  • Keywords sprint2013 added
  • Owner changed from nobody to bpeschier
  • Status changed from new to assigned

comment:9 Changed 2 years ago by timo

  • Patch needs improvement set

Patch no longer applies cleanly.

comment:10 Changed 16 months ago by anubhav9042

  • Owner changed from bpeschier to anubhav9042

comment:11 Changed 16 months ago by apollo13

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

comment:12 Changed 16 months ago by claudep

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 16 months 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 16 months ago by claudep

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

comment:15 Changed 16 months 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 16 months ago by anubhav9042

  • Patch needs improvement unset

comment:17 Changed 16 months ago by Tim Graham <timograham@…>

  • Resolution set to fixed
  • Status changed from assigned to closed

In 416a8580232075d569cf3c386a97067884c67a60:

Fixed #17922 -- Added required_css_class to form label.

Thanks hanson2010 for the suggestion.

comment:18 Changed 15 months ago by timo

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 15 months 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