Django: Bir formdaki giriş alanlarına rastgele html niteliklerini nasıl eklerim?

Şuna benzer bir şablonla oluşturulan bir giriş alanım var:

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

Hangisi şu şekilde oluşturulur:

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

Şimdi autocomplete="off", işlenen girdi öğesine bir öznitelik eklemek istediğimi varsayalım , bunu nasıl yapacağım? Veya onclick="xyz()"veya class="my-special-css-class"?

Bu sayfayı kontrol edin

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

Reklam için özür dilerim, ancak kısa bir süre önce bu tür görevleri daha da az acı verici hale getiren bir uygulama ( https://github.com/kmike/django-widget-tweaks ) yayınladım, böylece tasarımcılar bunu python koduna dokunmadan yapabilirler:

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

Veya alternatif olarak,

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

"ModelForm" kullanıyorsanız:

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

Cevabında verilen @Artificioo olarak ModelFormkullanma imkanı dışında kullanıyorsanız , __init__bunun için Meta'da bir widgetssözlük var :

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

İlgili belgeler

Bu şey için bütün bir uygulamayı kullanmak istemedim. Bunun yerine şu kodu burada buldum 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)

etiketi html dosyasında kullanın

{% 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 formlarında modeller oluşturmak ve güncellemek için yeniden kullanılabilir form şablonları oluşturmaya çalışmak için epeyce gün harcadım. Nesneyi değiştirmek veya oluşturmak için ModelForm kullandığımı unutmayın. Formlarımı biçimlendirmek için de önyükleme kullanıyorum. Geçmişte bazı formlar için django_form_tweaks kullandım, ancak çok fazla şablon bağımlılığı olmadan bazı özelleştirmelere ihtiyacım vardı. Projemde zaten jQuery bulunduğundan, formlarımı biçimlendirmek için özelliklerinden yararlanmaya karar verdim. İşte kod ve herhangi bir biçimde çalışabilir.

#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 Kodu Not: Birçok görünüm oluşturma zorluğunu ortadan kaldırmak için bootstrap4 modunu kullanıyorum. Belki genel CreateView veya UpdateView kullanmak daha iyidir. Bootstrap ve jqQery'yi bağlama

 <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 Kodu bunu $(document).ready(function() { /* ... */});fonksiyona yüklemeyi unutmayın .

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