Django: Wie füge ich beliebige HTML-Attribute zu Eingabefeldern in einem Formular hinzu?

Ich habe ein Eingabefeld, das mit einer Vorlage wie folgt gerendert wird:

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

Was gerendert wird als:

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

Angenommen, ich möchte ein hinzufügen autocomplete="off" Attribut zum Eingabeelement, das gerendert wird, wie würde ich das machen? Oder onclick="xyz()" oder class="my-special-css-class"?

Überprüfen Sie diese Seite

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

Entschuldigung für die Werbung, aber ich habe kürzlich eine App veröffentlicht (https://github.com/kmike/django-widget-tweaks), was solche Aufgaben noch weniger schmerzhaft macht, sodass Designer dies tun können, ohne den Python-Code zu berühren:

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

oder alternativ,

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

Wenn Sie “ModelForm” verwenden:

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

Wenn Sie verwenden ModelForm, abgesehen von der Möglichkeit der Verwendung __init__ Wie @Artificioo in seiner Antwort angegeben hat, gibt es a widgets Wörterbuch in Meta für diese Angelegenheit:

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

Relevante Dokumentation

Ich wollte keine ganze App für dieses Ding verwenden. Stattdessen habe ich hier folgenden Code gefunden 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)

Verwenden Sie das Tag in der HTML-Datei

{% load utils %}
{{ form.field_1|add_attr:"class:my_class1 my_class2" }}
{{ form.field_2|add_attr:"class:my_class1 my_class2,autocomplete:off" }}

Ich habe einige Tage damit verbracht, wiederverwendbare Formularvorlagen zu erstellen, um Modelle in Django-Formularen zu erstellen und zu aktualisieren. Beachten Sie, dass ich ModelForm verwende, um Objekte zu ändern oder zu erstellen. Ich benutze auch Bootstrap, um meine Formulare zu stylen. Ich habe in der Vergangenheit django_form_tweaks für einige Formulare verwendet, aber ich brauchte einige Anpassungen ohne große Vorlagenabhängigkeit. Da ich jQuery bereits in meinem Projekt habe, habe ich mich entschieden, seine Eigenschaften zu nutzen, um meine Formulare zu gestalten. Hier ist der Code und kann mit jedem Formular arbeiten.

#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"

Ansichten.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 Quelltext
Hinweis: Ich verwende bootstrap4 modal, um den Aufwand für das Erstellen vieler Ansichten zu beseitigen. Vielleicht ist es besser, generische CreateView oder UpdateView zu verwenden. Bootstrap und jqQery verknüpfen

 <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-Code Denken Sie daran, diese einzuladen $(document).ready(function() { /* ... */}); Funktion.

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