web-dev-qa-db-fra.com

Ajouter une classe au champ de formulaire Django ModelForm

J'essaie d'écrire un formulaire Bootstrap avec Django ModelForm. J'ai lu la documentation Django Documentation Django Documentation sur les formulaires , j'ai donc ce code:

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

Le {{form.subject}} est rendu par Django, par exemple dans le modèle de champ CharField, comme entrée tag,

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

J'ai besoin d'ajouter la classe "form-control" à chaque entrée afin d'obtenir Bootstrap apparence d'entrée (sans troisième- J'ai trouvé cette solution Django ajoute une classe au champ de formulaire . Existe-t-il un moyen d'ajouter une classe à chaque champ par défaut sans la spécifier dans chaque attribut de la classe de la classe Form?

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

etc ..

Merci d'avance.

djangodjango-formsdjango-templates
19
José Luis

Si vous ne pouvez pas utiliser une application tierce et que vous souhaitez ajouter une classe (par exemple, "contrôle de formulaire") à chaque champ d'un formulaire d'une manière DRY, vous pouvez le faire dans la méthode form class __init__() comme ceci:

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'

Vous devrez peut-être également gérer la vérification des classes existantes dans attrs, si pour une raison quelconque, vous ajouterez des classes de manière déclarative et dans __init__(). Le code ci-dessus ne tient pas compte de ce cas.

À noter:

Vous avez spécifié que vous ne souhaitez pas utiliser de packages tiers. Cependant, je prendrai une seconde pour mentionner que l'un des moyens les plus simples de rendre automatiquement les formulaires dans le style de Bootstrap consiste à utiliser Django-crispy-forms , comme ça:

# 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 %}
35
Christian Abbott

vous pouvez ajouter des classes CSS dans forms.py

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

Les formes croustillantes sont la voie à suivre. Conseils pour Bootstrap 4. Ajout à la réponse de @Christian Abbott, Pour les formulaires, bootstrap dit, utilisez form-group et form-control. Voilà comment cela a fonctionné) pour moi .

Mes formulaires.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'),
    )

Mon 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 %}

Remarque: Si vous utilisez CK Editor RichTextField () pour votre champ de modèle, ce champ ne sera pas affecté. Si quelqu'un le sait, mettez-le à jour.

1
Arindam Roychowdhury

Une façon consiste à créer une classe de formulaire de base et à mettre à jour manuellement l'attribut du champ à l'intérieur de __init__ méthode.

Une autre consiste à utiliser des bibliothèques déjà existantes comme celle-ci: https://github.com/dyve/Django-bootstrap

Il y a beaucoup de ces bibliothèques autour de github. Regardez autour de vous.

0
mariodev