如何自定義由django.forms生成的輸入元素？

Question

我使用django.forms生成我登錄/註冊頁面，部分代碼如下：

<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> 

正如你所看到的，{{ form.username }}和{{ form.password }}會自動分別生成一個<input id="id_username" maxlength="254" name="username" type="text">和<input id="id_password" name="password" type="password">。但是我想爲這些input字段添加一些額外的屬性，如placeholder和class。我可以在哪裏定製這些？

Answer 1

無論是手動：

<input type="text" name="{{ form.field.html_name }}" placeholder="foo" value="{{ form.field.value }}" /> 

，或者通過小窗口的attrs參數 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

您可以使用django-widget-tweaks這是一個非常好的庫來調整django的小部件。我已經使用過它，而且非常簡單。

從他們的網站：

{% 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 %} 

希望這有助於！