Opened 13 years ago

Last modified 10 years ago

#16304 closed New feature

Add HTML5 'placeholder' attribute support to form fields. — at Version 9

Reported by: rich@… Owned by: Kushagra Sinha
Component: Forms Version: dev
Severity: Normal Keywords: forms, placeholder, html5
Cc: Simon Charette, Kushagra Sinha, Andy Baker, lrekucki@…, claire12.reynaud@…, javi.manzano.oller@…, martmatwarne Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: yes
Easy pickings: yes UI/UX: yes

Description (last modified by Łukasz Rekucki)

HTML5 introduces a 'placeholder' attribute to form inputs, providing a text hint which disappears when the user highlights it, which greatly improves the UX of a page.

To do this in Django currently, you have to do something like:

comment = forms.CharField(max_length=200, widget=forms.TextInput({ "placeholder": "Text!"}))

However, to do this with a ModelForm is much more complicated: http://bitkickers.blogspot.com/2010/09/django-html5-input-placeholders.html

I suggest that there should be an easier way to set placeholder text in form fields and model form fields:

comment = forms.CharField(max_length=200, placeholder="Text!")

(This would also be a good starting point for other new HTML5 input elements, such as 'required' and 'email', but those should be separate tickets. The code would be very similar though.)
What do you think?

Change History (12)

comment:1 by Stephen Burrows, 13 years ago

Needs documentation: set
Needs tests: set
Triage Stage: UnreviewedAccepted
Version: 1.3SVN

This is related to ticket #15924, and in fact fills the requirements listed there for not being closed. As long as a patch doesn't break backwards compatibility, it should be fine. Note, however, that it's much more likely to happen if you yourself make the patch.

comment:2 by Stephen Burrows, 13 years ago

Summary: Forms Need HTML5 'placeholder' attributeAdd HTML5 'placeholder' attribute support to form fields.

comment:3 by Dougal Matthews, 13 years ago

I think this ticket needs to be coordinated with the form rendering GSOC as a number of changes are being made in this area. Thus you may want to add it to the discussion on the mailing list: https://groups.google.com/d/topic/django-developers/N5EVJhb9la4/discussion

comment:4 by Andy Venet, 13 years ago

Owner: changed from nobody to Andy Venet
Status: newassigned

by Andy Venet, 13 years ago

Attachment: placeholder.patch added

Patch for adding placeholder attribute on CharField class

by Kushagra Sinha, 13 years ago

Attachment: 16304.patch added

Adds placeholder attribute functionality to Model forms and normal forms. Has docs. Does not have tests

comment:5 by Kushagra Sinha, 13 years ago

Cc: Kushagra Sinha added
Has patch: set
Needs documentation: unset
Owner: changed from Andy Venet to Kushagra Sinha
Patch needs improvement: set
Status: assignednew

I have added the said functionality to both model forms and normal forms, in 16304.patch.

However, I suggest to club this ticket with a bigger undertaking of making Django HTML5 aware.

by Kushagra Sinha, 13 years ago

Attachment: 16304_v2.patch added

Adds placeholder attribute functionality to forms. Has docs. Has tests.

comment:6 by Kushagra Sinha, 13 years ago

Needs tests: unset
Patch needs improvement: unset
Status: newassigned

Based on the discussions on dev mailing list, I have removed placeholder attribute from ModelForms.

The submitted patch adds a placeholder attribute to Forms. ModelForms will have to be manually overridden to add a placeholder attribute. Has tests and documentation.

comment:7 by Andy Baker, 12 years ago

Cc: Andy Baker added

comment:8 by Artem Skoretskiy, 12 years ago

Any blockers for landing it in the master? It looks like it is done but not merged for some reason.

It is really needed and useful feature, it improves user experience without tons of workarounds.

Just to note -- all major browsers already support it for more than a year:

browser: Firefox Safari	Chrome	Opera	IE	iPhone	Android
version: 4.0+	 4.0+	4.0+	11.0+	10.0+	4.0+	2.1+

comment:9 by Łukasz Rekucki, 12 years ago

Description: modified (diff)
Patch needs improvement: set

Is there any reason why this is added only to CharField? placeholder is more of a widget thing, so it shouldn't matter on what type of field I define it as long as I use a widget that can render it. placeholder is also legal on <textarea> not only variations of <input type="...">.

Last edited 12 years ago by Łukasz Rekucki (previous) (diff)
Note: See TracTickets for help on using tickets.
Back to Top