Django: Bagaimana cara menambahkan atribut html sembarangan ke bidang masukan pada formulir?

Saya memiliki kolom input yang dirender dengan template seperti ini:

<div class="field">
   {{ form.city }}
</div>

Yang diterjemahkan sebagai:

<div class="field">
    <input id="id_city" type="text" name="city" maxlength="100" />
</div>

Sekarang misalkan saya ingin menambahkan autocomplete="off"atribut ke elemen masukan yang diberikan, bagaimana saya melakukannya? Atau onclick="xyz()"atau class="my-special-css-class"?

Periksa halaman ini

city = forms.CharField(widget=forms.TextInput(attrs={'autocomplete':'off'}))

Maaf untuk iklannya, tetapi saya baru-baru ini merilis sebuah aplikasi ( https://github.com/kmike/django-widget-tweaks ) yang membuat tugas-tugas seperti itu semakin tidak menyakitkan sehingga desainer dapat melakukannya tanpa menyentuh kode python:

{% load widget_tweaks %}
...
<div class="field">
   {{ form.city|attr:"autocomplete:off"|add_class:"my_css_class" }}
</div>

atau, sebagai alternatif,

{% load widget_tweaks %}
...
<div class="field">
   {% render_field form.city autocomplete="off" class+="my_css_class" %}
</div>

Jika Anda menggunakan "ModelForm":

class YourModelForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(YourModelForm, self).__init__(*args, **kwargs)
        self.fields['city'].widget.attrs.update({
            'autocomplete': 'off'
        })

Jika Anda menggunakan ModelForm, selain kemungkinan menggunakan __init__@Artificioo yang diberikan dalam jawabannya, ada widgetskamus di Meta untuk hal itu:

class AuthorForm(ModelForm):
    class Meta:
        model = Author
        fields = ('name', 'title', 'birth_date')
        widgets = {
            'name': Textarea(attrs={'cols': 80, 'rows': 20}),
        }

Dokumentasi yang relevan

Saya tidak ingin menggunakan seluruh aplikasi untuk hal ini. Sebaliknya saya menemukan kode berikut di sini 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)

gunakan tag di file 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" }}

Saya telah menghabiskan beberapa hari mencoba membuat templat formulir yang dapat digunakan kembali untuk membuat dan memperbarui model dalam formulir Django. Perhatikan bahwa saya menggunakan ModelForm untuk mengubah atau membuat objek. Saya juga menggunakan bootstrap untuk menata formulir saya. Saya menggunakan django_form_tweaks untuk beberapa formulir di masa lalu, tetapi saya membutuhkan beberapa penyesuaian tanpa banyak ketergantungan template. Karena saya sudah memiliki jQuery di Proyek saya, saya memutuskan untuk memanfaatkan propertinya untuk menata formulir saya. Ini kodenya, dan dapat bekerja dengan bentuk apa pun.

#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')

Kode HTML Catatan: Saya menggunakan modal bootstrap4 untuk menghilangkan kerumitan membuat banyak tampilan. Mungkin lebih baik menggunakan CreateView atau UpdateView generik. Hubungkan Bootstrap dan 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>

Kode Javascript ingat untuk memuat ini dalam $(document).ready(function() { /* ... */});fungsi.

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')
  });