How to add placeholder to forms of Django-Registration

Question

I am using django-registration for my project. in my registration_form.html file:

{{form.username}}
{{form.email}}
//other fields

And I want to set placeholders for each field. But this is a kind of built-in app. so I need to find the way for editing these fields from my main app.

I don't want to change source of django-registration.

Do you define custom django forms for this or using the built-in forms? — arulmr, Nov 23 '12 at 05:19
i am using built-in [forms](http://docs.b-list.org/django-registration/0.8/forms.html?highlight=registration%20form#registration.forms.RegistrationFormUniqueEmail) — alioguzhan, Nov 23 '12 at 05:26
Is it fine with you, to add placeholder to fields using jQuery? — arulmr, Nov 23 '12 at 05:48

arulmr · Accepted Answer · 2012-11-23T06:57:28.420

24

If you can override the built-in form, you can define the placeholder as follows:

class RegistrationForm(forms.ModelForm):
    class Meta:
        model = YourModelName
        widgets = {
            'username' : forms.TextInput(attrs = {'placeholder': 'Username'}),
            'email'    : forms.TextInput(attrs = {'placeholder': 'E-Mail'}),
        }

Or else you can use jQuery to add placeholder to the fields by using the corresponding field's id as given below:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" >
    $(document).ready(function(){
        $("#id_username").attr('placeholder', '{{form.username.label}}');
        $("#id_email").attr('placeholder', '{{form.email.label}}');
    });
</script>

You can use firebug to find the id of the field.

edited Nov 23 '12 at 06:57

answered Nov 23 '12 at 06:49

arulmr

8,620
9
54
69

May you edit the answer to add "how to override the built-in form"? For example I created a directory "accounts", I created a module named "forms.py" but this one should be called from urls.py right? – realnot Dec 10 '16 at 13:34
@realnot I don't understand your question. – arulmr Dec 10 '16 at 16:48
@arulmr I used your suggestion and I inherited the RegistrationForm defining a custom form to add my `stuff`. The problem is adding a placeholder, a css class or any attribute to the class. This is the result: http://dpaste.com/3RY8ZR1 but doesn't works. the placeholder and css class defined inside the widget parameter is not added to the input element generated by the template. – realnot Dec 10 '16 at 16:58
@realnot Change `class Meta(RegistrationForm.Meta):` to `class Meta:`. Why would you define Meta class like that? – arulmr Dec 11 '16 at 12:01
@arulmr I explained the issue in a new question: http://stackoverflow.com/q/41088567/2653437 – realnot Dec 11 '16 at 16:51

score 12 · Answer 2 · answered Sep 06 '13 at 00:47

12

I would actually create a template tag filter that modifies the field.

@register.filter
def html_placeholder(field, args=None):
    if args == None:
        return field
    field.field.widget.attrs.update({ "placeholder": args })
    return field

answered Sep 06 '13 at 00:47

airtonix

4,772
2
38
36

score 1 · Answer 3 · answered Feb 06 '15 at 20:36

Another approach, which works for django.contrib.auth.AuthenticationForm (and I assume should work in your case as well) is to inject this information while rendering the view. That way you don't need to embed it in your form class and don't need to force jquery.

def index(request):
    form = AuthenticationForm(request)
    form.fields['username'].widget.attrs.update({
            'placeholder': 'Name'
        })
    form.fields['password'].widget.attrs.update({
            'placeholder': 'Password'
        })

    context = RequestContext(request, {
        'form' : form,
    })
    return HttpResponse(template.render(context))

How to add placeholder to forms of Django-Registration

3 Answers3

Linked