web-dev-qa-db-de.com

Klasse zum Formularfeld hinzufügen Django ModelForm

Ich versuche mit Django ModelForm ein Bootstrap-Formular zu schreiben. Ich habe die Django-Dokumentation Django-Dokumentation zu Formularen gelesen, daher habe ich folgenden Code:

<div class="form-group">
{{ form.subject.errors }}
<label for="{{ form.subject.id_for_label }}">Email subject:</label>
{{ form.subject }}</div>

Das {{form.subject}} wird von Django beispielsweise im CharField-Feldmodell als input tag gerendert.

<input type="text"....> etc.

Ich muss zu jeder Eingabe "form-control" class hinzufügen, um das Erscheinungsbild der Bootstrap-Eingabe zu erhalten (ohne Pakete von Drittanbietern). Ich fand diese Lösung Django füge Klasse hinzu, um Feld zu bilden. Gibt es eine Möglichkeit, jedem Feld standardmäßig eine Klasse hinzuzufügen, ohne sie in jedem Attribut der Klasse der Form-Klasse anzugeben?

class ExampleForm(forms.Form):
   name = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
   email = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
   address = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
   country = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))

und so weiter ..

Danke im Voraus.

10
José Luis

Wenn Sie keine Drittanbieter-App verwenden können und jedem Feld in einem Formular auf DRY Weise eine Klasse (z. B. "Formularsteuerung") hinzufügen möchten, können Sie dies im Formular tun Klasse __init__() Methode wie folgt:

class ExampleForm(forms.Form):
    # Your declared form fields here
    ...

    def __init__(self, *args, **kwargs):
        super(ExampleForm, self).__init__(*args, **kwargs)
        for visible in self.visible_fields():
            visible.field.widget.attrs['class'] = 'form-control'

Möglicherweise müssen Sie auch in attrs nach vorhandenen Klassen suchen, wenn Sie aus irgendeinem Grund Klassen deklarativ und innerhalb von __init__() hinzufügen. Der obige Code berücksichtigt diesen Fall nicht.

Erwähnenswert:

Sie haben angegeben, dass Sie keine Pakete von Drittanbietern verwenden möchten. Ich nehme mir jedoch eine Sekunde Zeit, um zu erwähnen, dass eine der einfachsten Methoden zum automatischen Rendern von Formularen im Stil von Bootstrap darin besteht, Django-crispy-forms wie folgt zu verwenden:

# settings.py
CRISPY_TEMPLATE_PACK = 'bootstrap3'

# forms.py
from crispy_forms.helper import FormHelper
class ExampleForm(forms.Form):
    # Your declared form fields here
    ...
    helper = FormHelper()

# In your template, this renders the form Bootstrap-style:
{% load crispy_forms_tags %}
{% crispy form %}
25

sie können CSS-Klassen in forms.py hinzufügen

subject = forms.CharField(label='subject', max_length=100 , widget=forms.TextInput(attrs={'class': "form-control"}))

Eine Möglichkeit besteht darin, eine Basisformularklasse zu erstellen und das Feldattribut in der __init__-Methode manuell zu aktualisieren.

Eine andere Möglichkeit besteht darin, bereits vorhandene Bibliotheken wie diese zu verwenden: https://github.com/dyve/Django-bootstrap3

Es gibt viele dieser Bibliotheken rund um Github. Umschauen.

0
mariodev

Knusprige Formen sind der richtige Weg. Tipps für Bootstrap 4. Hinzufügen zu @Christian Abbotts Antwort: Verwenden Sie für Formulare laut Bootstrap die Formulargruppe und die Formularsteuerung. So hat es bei mir funktioniert.

Meine forms.py

class BlogPostForm(forms.ModelForm):
    class Meta:
        model = models.Post
        fields = ['title', 'text', 'tags', 'author', 'slug']
    helper = FormHelper()
    helper.form_class = 'form-group'
    helper.layout = Layout(
        Field('title', css_class='form-control mt-2 mb-3'),
        Field('text', rows="3", css_class='form-control mb-3'),
        Field('author', css_class='form-control mb-3'),
        Field('tags', css_class='form-control mb-3'),
        Field('slug', css_class='form-control'),
    )

Meine post_create.html

{% extends 'blog/new_blog_base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">

<form method='POST' enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.media }}
    {% crispy form %}

<hr>
<input type="submit" name="Save" value="Save" class='btn btn-primary'> <a href="{% url 'home' %}" class='btn btn-danger'>Cancel</a>
</form>

</div>
{% endblock %}

Hinweis: Wenn Sie CK Editor RichTextField () für Ihr Modellfeld verwenden, ist dieses Feld nicht betroffen. Wenn jemand davon weiß, aktualisieren Sie dies.