Code

Opened 2 years ago

Closed 3 weeks ago

Last modified 3 weeks 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 2 years ago.
patch file for 1.3.1
17922-2.diff (1.9 KB) - added by claudep 19 months ago.
Set required_css_class on label

Download all attachments as: .zip

Change History (21)

Changed 2 years ago by hanson2010

patch file for 1.3.1

comment:1 Changed 23 months 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 20 months 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 20 months 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 20 months 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 20 months ago by d1ffuz0r

  • Cc d1fffuz0r@… added

comment:6 follow-up: Changed 19 months 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 19 months ago by claudep

Set required_css_class on label

comment:7 in reply to: ↑ 6 Changed 19 months 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 14 months ago by bpeschier

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

comment:9 Changed 9 months ago by timo

  • Patch needs improvement set

Patch no longer applies cleanly.

comment:10 Changed 6 weeks ago by anubhav9042

  • Owner changed from bpeschier to anubhav9042

comment:11 Changed 6 weeks ago by apollo13

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

comment:12 Changed 6 weeks 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 6 weeks 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 6 weeks ago by claudep

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

comment:15 Changed 6 weeks 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 weeks ago by anubhav9042

  • Patch needs improvement unset

comment:17 Changed 3 weeks 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 3 weeks 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 3 weeks ago by Tim Graham <timograham@…>

In ed4c2e1c0d9e43c09767b02fd8b4bd74a5dfe512:

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

refs #17922.

Add Comment

Modify Ticket

Change Properties
<Author field>
Action
as closed
as The resolution will be set. Next status will be 'closed'
The resolution will be deleted. Next status will be 'new'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.