次のようなテンプレートでレンダリングされる入力フィールドがあります。
<div class="field">
{{ form.city }}
</div>
これは次のようにレンダリングされます：
<div class="field">
<input id="id_city" type="text" name="city" maxlength="100" />
</div>
ここで、レンダリングされる入力要素に属性を追加したいとしautocomplete="off"ます。どうすればよいでしょうか。またはonclick="xyz()"またはclass="my-special-css-class"？
city = forms.CharField(widget=forms.TextInput(attrs={'autocomplete':'off'}))
申し訳ありませんが、最近リリースしたアプリ（https://github.com/kmike/django-widget-tweaks）を使用すると、このようなタスクの負担がさらに軽減されるため、デザイナーはPythonコードに触れることなくそれを実行できます。
{% load widget_tweaks %}
...
<div class="field">
{{ form.city|attr:"autocomplete:off"|add_class:"my_css_class" }}
</div>
または、あるいは、
{% load widget_tweaks %}
...
<div class="field">
{% render_field form.city autocomplete="off" class+="my_css_class" %}
</div>
「ModelForm」を使用している場合：
class YourModelForm(forms.ModelForm):
def __init__(self, *args, **kwargs):
super(YourModelForm, self).__init__(*args, **kwargs)
self.fields['city'].widget.attrs.update({
'autocomplete': 'off'
})
を使用している場合、彼の回答で提供されている@ArtificiooとしてModelForm使用する可能性は別として、Metaにはそのことに関する辞書があります。__init__widgets
class AuthorForm(ModelForm):
class Meta:
model = Author
fields = ('name', 'title', 'birth_date')
widgets = {
'name': Textarea(attrs={'cols': 80, 'rows': 20}),
}
私はこのことのためにアプリ全体を使いたくありませんでした。代わりに、ここで次のコードを見つけましたhttps://blog.joeymasip.com/how-to-add-attributes-to-form-widgets-in-django-templates/
# utils.py
from django.template import Library
register = Library()
@register.filter(name='add_attr')
def add_attr(field, css):
attrs = {}
definition = css.split(',')
for d in definition:
if ':' not in d:
attrs['class'] = d
else:
key, val = d.split(':')
attrs[key] = val
return field.as_widget(attrs=attrs)
htmlファイルのタグを使用します
{% load utils %}
{{ form.field_1|add_attr:"class:my_class1 my_class2" }}
{{ form.field_2|add_attr:"class:my_class1 my_class2,autocomplete:off" }}
Djangoフォームでモデルを作成および更新するために、再利用可能なフォームテンプレートを作成するためにかなりの日数を費やしました。ModelFormを使用してオブジェクトを変更または作成していることに注意してください。フォームのスタイルを設定するためにブートストラップも使用しています。以前はいくつかのフォームにdjango_form_tweaksを使用していましたが、テンプレートにあまり依存せずにカスタマイズする必要がありました。プロジェクトにはすでにjQueryがあるので、そのプロパティを利用してフォームのスタイルを設定することにしました。これがコードで、どのフォームでも機能します。
#forms.py
from django import forms
from user.models import User, UserProfile
from .models import Task, Transaction
class AddTransactionForm(forms.ModelForm):
class Meta:
model = Transaction
exclude = ['ref_number',]
required_css_class = 'required'
Views.py
@method_decorator(login_required, name='dispatch')
class TransactionView(View):
def get(self, *args, **kwargs):
transactions = Transaction.objects.all()
form = AddTransactionForm
template = 'pages/transaction.html'
context = {
'active': 'transaction',
'transactions': transactions,
'form': form
}
return render(self.request, template, context)
def post(self, *args, **kwargs):
form = AddTransactionForm(self.request.POST or None)
if form.is_valid():
form.save()
messages.success(self.request, 'New Transaction recorded succesfully')
return redirect('dashboard:transaction')
messages.error(self.request, 'Fill the form')
return redirect('dashboard:transaction')
HTMLコード 注：bootstrap4モーダルを使用して、多くのビューを作成する手間を省いています。たぶん、汎用のCreateViewまたはUpdateViewを使用する方が良いでしょう。リンクブートストラップとjqQery
<div class="modal-body">
<form method="post" class="md-form" action="." enctype="multipart/form-data">
{% csrf_token %}
{% for field in form %}
<div class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="" class="col-sm-4 col-form-label {% if field.field.required %}
required font-weight-bolder text-danger{%endif %}">{{field.label}}</label>
<div class="col-sm-8">
{{field}}
</div>
</div>
</div>
</div>
{% endfor %}
<input type="submit" value="Add Transaction" class="btn btn-primary">
</form>
</div>
Javascriptコード$(document).ready(function() { /* ... */});は、これを関数にロードすることを忘れないでください。
var $list = $("#django_form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("#django_form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("#django_form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});
var $list = $("form :input[type='text']");
$list.each(function () {
$(this).addClass('form-control')
});
var $select = $("form select");
$select.each(function () {
$(this).addClass('custom-select w-90')
});
var $list = $("form :input[type='number']");
$list.each(function () {
$(this).addClass('form-control')
});