Django: Comment ajouter des attributs html arbitraires aux champs d'entrée d'un formulaire?

J'ai un champ d'entrée qui est rendu avec un modèle comme ceci:

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

Qui est rendu comme:

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

Supposons maintenant que je veuille ajouter un autocomplete="off"attribut à l'élément d'entrée qui est rendu, comment ferais-je cela? Ou onclick="xyz()"ou class="my-special-css-class"?

Consultez cette page

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

Désolé pour la publicité, mais j'ai récemment publié une application ( https://github.com/kmike/django-widget-tweaks ) qui rend ces tâches encore moins pénibles afin que les concepteurs puissent le faire sans toucher au code Python:

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

Ou bien,

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

Si vous utilisez "ModelForm":

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

Si vous utilisez ModelForm, outre la possibilité d'utiliser __init__comme @Artificioo fournie dans sa réponse, il existe un widgetsdictionnaire dans Meta d'ailleurs:

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

Documentation pertinente

Je ne voulais pas utiliser une application entière pour cette chose. Au lieu de cela, j'ai trouvé le code suivant ici 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)

utilisez la balise dans le fichier 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" }}

J'ai passé plusieurs jours à essayer de créer des modèles de formulaires réutilisables pour créer et mettre à jour des modèles dans les formulaires Django. Notez que j'utilise ModelForm pour modifier ou créer un objet. J'utilise aussi bootstrap pour styliser mes formulaires. J'ai utilisé django_form_tweaks pour certains formulaires dans le passé, mais j'avais besoin d'une certaine personnalisation sans beaucoup de dépendance de modèle. Comme j'ai déjà jQuery dans mon projet, j'ai décidé d'exploiter ses propriétés pour styliser mes formulaires. Voici le code, et peut fonctionner avec n'importe quel formulaire.

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

Remarque sur le code HTML : J'utilise le modal bootstrap4 pour supprimer les tracas liés à la création de nombreuses vues. Il est peut-être préférable d'utiliser CreateView ou UpdateView générique. Lier Bootstrap et 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>

Code Javascript n'oubliez pas de charger ceci en $(document).ready(function() { /* ... */});fonction.

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