Django: Làm cách nào để thêm các thuộc tính html tùy ý vào các trường đầu vào trên một biểu mẫu?

Tôi có một trường đầu vào được hiển thị với một mẫu như sau:

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

Được hiển thị dưới dạng:

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

Bây giờ, giả sử tôi muốn thêm một autocomplete="off"thuộc tính vào phần tử đầu vào được hiển thị, tôi sẽ làm điều đó như thế nào? Hoặc onclick="xyz()"hoặc class="my-special-css-class"?

Kiểm tra trang này

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

Xin lỗi vì quảng cáo, nhưng gần đây tôi đã phát hành một ứng dụng ( https://github.com/kmike/django-widget-tweaks ) giúp các tác vụ như vậy trở nên ít khó khăn hơn để các nhà thiết kế có thể làm điều đó mà không cần chạm vào mã python:

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

Hay cách khác,

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

Nếu bạn đang sử dụng "ModelForm":

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

Nếu bạn đang sử dụng ModelForm, ngoài khả năng sử dụng __init__như @Artificioo được cung cấp trong câu trả lời của anh ấy, có một widgetstừ điển trong Meta cho vấn đề đó:

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

Tài liệu liên quan

Tôi không muốn sử dụng toàn bộ một ứng dụng cho việc này. Thay vào đó, tôi tìm thấy mã sau đây ở đây 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)

sử dụng thẻ trong tệp 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" }}

Tôi đã dành khá nhiều ngày để cố gắng tạo các mẫu biểu mẫu có thể sử dụng lại để tạo và cập nhật các mô hình trong biểu mẫu Django. Lưu ý rằng đang sử dụng ModelForm để thay đổi hoặc tạo đối tượng. Tôi cũng đang sử dụng bootstrap để tạo kiểu cho các biểu mẫu của tôi. Tôi đã sử dụng django_form_tweaks cho một số biểu mẫu trước đây, nhưng tôi cần một số tùy chỉnh mà không phụ thuộc nhiều vào mẫu. Vì tôi đã có jQuery trong Dự án của mình nên tôi quyết định tận dụng các thuộc tính của nó để tạo kiểu cho các biểu mẫu của tôi. Đây là mã và có thể hoạt động với bất kỳ hình thức nào.

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

Lưu ý về mã HTML : Đang sử dụng phương thức bootstrap4 để loại bỏ những rắc rối khi tạo nhiều chế độ xem. Có lẽ tốt hơn nên sử dụng CreateView hoặc UpdateView chung. Liên kết Bootstrap và 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>

Mã Javascript hãy nhớ tải điều này trong $(document).ready(function() { /* ... */});chức năng.

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