How can I override the django AuthenticationForm input css class?

Question

I have a django site using the basic django registration framework. I have my login page working fine, but I want to change the css class on the inputs. The form passed to the login page looks to be an AuthenticationForm class.

What would be a good way to add a css class to the username, and password fields?

Victor 'Chris' Cabral · Accepted Answer · 2012-09-08 19:08:59Z

13

Sub class your auth form

forms.py

from django import forms
from django.contrib.auth.forms import AuthenticationForm
from django.forms.widgets import PasswordInput, TextInput

class RFPAuthForm(AuthenticationForm):
    username = forms.CharField(widget=TextInput(attrs={'class': 'span2','placeholder': 'Email'}))
    password = forms.CharField(widget=PasswordInput(attrs={'class': 'span2','placeholder':'Password'}))

answered Sep 8, 2012 at 19:08

Victor 'Chris' Cabral

2,1731 gold badge16 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor 'Chris' Cabral Over a year ago

Also try github.com/kmike/django-widget-tweaks if you just need to add a class.

boreq Over a year ago

The username field in the AuthenticationForm has got max_langth=254 specified. Do you think I should add this value to my field too? Are those overwritten by my declaration?

panchicore · Accepted Answer · 2010-03-06 15:15:16Z

8

I do what you want like this:

def login(request):
    form = AuthenticationForm(request)
    form.fields['username'].widget.attrs['class'] = "custom_css"
    form.fields['password'].widget.attrs['style'] = "background:red"
    return render_to_response("login.html", {'form':form},
                          context_instance=RequestContext(request))

answered Mar 6, 2010 at 15:15

panchicore

12k13 gold badges77 silver badges101 bronze badges

3 Comments

juankysmith Over a year ago

What if I am using django.contrib.auth.views.login and I want to include the form on every page in my website? I cannot see the login form I included in base.html and I think it is because I cannot connect the django.contrib.auth.views.login's AuthenticationForm to my CSS file. What do you think?

panchicore Over a year ago

1. you can make a template tag, something like {% get_login_form %}

panchicore Over a year ago

2. you can extend the auth form and overwrite the init method to put the attrs.

Collectives™ on Stack Overflow

How can I override the django AuthenticationForm input css class?

2 Answers 2

forms.py

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

forms.py

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related