How to customize the input element generated by django.forms? - django

Question

I'm using django.forms to generate my login/signup page, part of code is as follows:
<form method="post" action="{% url 'login' %}">
{% csrf_token %}
<table>
<tr>
{# username is directed to email field in our model #}
<td>{{ form.username.label_tag }}</td>
<td>{{ form.username }}</td>
</tr>
<tr>
<td>{{ form.password.label_tag }}</td>
<td>{{ form.password }}</td>
</tr>
</table>
<input type="submit" value="login" />
{% if next %}
<input type="hidden" name="next" value="{{ next }}" />
{% else %}
<input type="hidden" name="next" value="{% url 'home' %}" />
{% endif %}
</form>
As you can see, the {{ form.username }} and {{ form.password }} will automatically generate an <input id="id_username" maxlength="254" name="username" type="text"> and an <input id="id_password" name="password" type="password"> respectively. But I want to add some extra attributes to these input fields, like placeholderand class. Where can I customize these?

Answer 1

Either manually:
<input type="text" name="{{ form.field.html_name }}" placeholder="foo" value="{{ form.field.value }}" />
Or via the widget attrs argument
https://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs
class MyForm(forms.Form):
field = forms.CharField(widget=forms.TextInput(attrs={'placehoder': 'foo', 'title': 'baz'}))

Answer 2

You may use django-widget-tweaks which is a very nice library for tweaking django's widget. I've used it and it's quite simple.
From their site:
{% load widget_tweaks %}
<!-- change input type (e.g. to HTML5) -->
{% render_field form.search_query type="search" %}
<!-- add/change several attributes -->
{% render_field form.text rows="20" cols="20" title="Hello, world!" %}
<!-- append to an attribute -->
{% render_field form.title class+="css_class_1 css_class_2" %}
<!-- template variables can be used as attribute values -->
{% render_field form.text placeholder=form.text.label %}
Hope this helps!