Django: come aggiungo attributi HTML arbitrari ai campi di input in un modulo?

Ho un campo di input che viene visualizzato con un modello in questo modo:

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

Che è reso come:

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

Supponiamo ora di voler aggiungere un autocomplete="off"attributo all'elemento di input che viene visualizzato, come lo farei? O onclick="xyz()"o class="my-special-css-class"?

Controlla questa pagina

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

Ci scusiamo per la pubblicità, ma di recente ho rilasciato un'app ( https://github.com/kmike/django-widget-tweaks ) che rende tali attività ancora meno dolorose in modo che i progettisti possano farlo senza toccare il codice Python:

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

o, in alternativa,

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

Se stai usando "ModelForm":

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

Se stai usando ModelForm, a parte la possibilità di utilizzare __init__come @Artificioo fornito nella sua risposta, c'è un widgetsdizionario in Meta per quella materia:

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

Documentazione pertinente

Non volevo usare un'intera app per questa cosa. Invece ho trovato il seguente codice qui 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)

usa il tag nel 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" }}

Ho passato diversi giorni a cercare di creare modelli di modulo riutilizzabili per creare e aggiornare modelli nei moduli Django. Nota che sto usando ModelForm per modificare o creare oggetti. Sto usando anche bootstrap per modellare i miei moduli. Ho usato django_form_tweaks per alcuni moduli in passato, ma avevo bisogno di personalizzazione senza molte dipendenze dai modelli. Dato che ho già jQuery nel mio progetto, ho deciso di sfruttare le sue proprietà per modellare i miei moduli. Ecco il codice e può funzionare con qualsiasi modulo.

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

Nota sul codice HTML : sto usando bootstrap4 modal per rimuovere il fastidio di creare molte visualizzazioni. Forse è meglio usare CreateView o UpdateView generici. Collega Bootstrap e 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>

Codice Javascript ricordati di caricarlo nella $(document).ready(function() { /* ... */});funzione.

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