I recently started working with Django and came across Django forms when using the django.contrib.auth.views.login
view for user authentication.
However, I'm struggling to figure out how to add a CSS class to the username and password fields. The documentation doesn't provide clear instructions on how to achieve this. Ideally, I would like to simply include the extra information in the template tag like
{{ form.username | class="usernameclass" }}
, or manually define the field such as <input type="{{ form.password.type }}" name="{{ form.password.name }}" class="form-field-password"/>
. If necessary, I am willing to create a custom view to implement this feature.
The relevant files are outlined below:
templates/login.html:
{% load url from future %}
...
<form method="post" action="{% url 'django.contrib.auth.views.login' %}">
{% csrf_token %}
<span class="heading">{{ form.username.label_tag }}</span><br/>
{{ form.username }}<br/>
<span class="heading">{{ form.password.label_tag }}</span><br/>
{{ form.password }}<br/>
<div id="login-button">
<input type="submit" value="Log In" />
<input type="hidden" name="next" value="{{ next }}" />
</div>
</form>
...
settings.py:
...
LOGIN_URL = '/login/'
...
urls.py
...
urlpatterns = patterns('',
url(r'^$', 'portal.views.home', name='home'),
url(r'^login/$', 'django.contrib.auth.views.login', {'template_name': 'login.html'}),
url(r'^logout/$', 'django.contrib.auth.views.logout'),
...
)
Your advice is greatly appreciated!