webentwicklung-frage-antwort-db.com.de

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>

Welches wird gerendert als:

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

Angenommen, ich möchte dem gerenderten Eingabeelement ein Attribut autocomplete="off" Hinzufügen. Wie würde ich das tun? Oder onclick="xyz()" oder class="my-special-css-class"?

djangodjango-templatesdjango-formsdjango-widgethtml
95
User

Diese Seite überprüfen

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

Es tut mir leid für die Werbung, aber ich habe kürzlich eine App veröffentlicht ( https://github.com/kmike/Django-widget-tweaks ), die solche Aufgaben noch schmerzfreier macht, sodass Designer das tun können, ohne sie zu berühren python code:

{% 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>
107
Mikhail Korobov

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'
        })
29
Artificioo

Wenn Sie ModelForm verwenden, abgesehen von der Möglichkeit, __init__ Wie @Artificioo in seiner Antwort angegeben hat, gibt es in Meta ein widgets Wörterbuch 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

18
Wtower

Ich wollte nicht eine ganze App für dieses Ding verwenden. Stattdessen fand ich den folgenden Code hier 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" }}
1
ohlr

Ich hatte das gleiche Problem und konnte es folgendermaßen lösen: Ich folgte dem Code in diesem Link und fügte eine kleine Änderung hinzu https://blog.joeymasip.com/how-to-add-attributes-to -Form-Widgets-in-Django-Vorlagen /

Sommerlich:

Schritt 1: Erstellen Sie eine Datei mit dem Namen add_attr.py und platzieren Sie sie im Ordner templatetags in Ihrer Anwendung

Schritt 2: Fügen Sie add_attr.py den folgenden Code hinzu

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)

Schritt 3: Verwenden Sie das Tag wie folgt: Laden Sie das Tag:

{% load add_attr %}

beispiel:

<input type="email" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">

wird

{{ form.email|add_attr:'id=defaultLoginFormEmail,class=form-control mb-4,placeholder=E-mail' }}
0
Akram Yaslam