Comment ajouter des class, id, espace réservé attributs d'un champ dans django modèle de formulaires

J'ai un django modèle comme ci-dessous

models.py

class Product(models.Model):
    name = models.CharField(max_length = 300)
    description = models.TextField(max_length = 2000)
    created = models.DateTimeField(auto_now_add = True)
    updated = models.DateTimeField(auto_now = True)

    def __unicode__(self):
        return self.name

forms.py

class ProductForm(ModelForm):
    class Meta:
        model = Product
        exclude = ('updated', 'created')

product_form.py(juste un exemple)

 <form enctype="multipart/form-data" action="{% url 'add_a_product' %}" method="post">
         <div id="name">
           {{form.name}}
         </div> 
         <div id="description">
           {{form.description}}
         </div> 
   </form>

En fait, je veux afficher/afficher le code html de sortie comme ci-dessous

<input id="common_id_for_inputfields" type="text" placeholder="Name" class="input-calss_name" name="Name">

<input id="common_id_for_inputfields" type="text" placeholder="Description" class="input-calss_name" name="description">

Donc, finalement, comment faire pour ajouter des attributs(id, espace réservé, la classe)pour le modèle de champs de formulaire dans le code ci-dessus ?

InformationsquelleAutor Shiva Krishna Bavandla | 2013-10-21

45

Vous pouvez effectuer les opérations suivantes:
```
#forms.py
class ProductForm(ModelForm):
    class Meta:
        model = Product
        exclude = ('updated', 'created')

    def __init__(self, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs)
        self.fields['description'].widget = TextInput(attrs={
            'id': 'myCustomId',
            'class': 'myCustomClass',
            'name': 'myCustomName',
            'placeholder': 'myCustomPlaceholder'})
```
- Cela a bien fonctionné pour moi, sauf qu'elle a effacé toutes les options de mon widget de sélection. J'ai découvert que vous pouvez ignorer le widget déclaration tous ensemble et encore définir ses attributs comme: self.fields['description'].widget.attrs={ 'id': 'myCustomId', 'class': 'myCustomClass', 'name': 'myCustomName', 'placeholder': 'myCustomPlaceholder'} semble Aussi un peu plus propre pour moi.
- Si vous souhaitez ajouter des classes de bootstrap à toutes les formes sans avoir à remplacer constructeur à chaque fois voir ma réponse ci-dessous.
- Est-il aussi un moyen de donner le même id que le nom?
InformationsquelleAutor Alex Parakhnevich
27

Champ id doit être généré automatiquement par django, pour remplacer d'autres domaines:
```
class ProductForm(ModelForm):
    class Meta:
        model = Product
        exclude = ('updated', 'created')

    def __init__(self, *args, **kwargs):
        super(ProductForm, self).__init__(*args, **kwargs)
        self.fields['name'].widget.attrs\
            .update({
                'placeholder': 'Name',
                'class': 'input-calss_name'
            })
```
- Sont id est vraiment DEVRAIENT être générés automatiquement? Vous pouvez remplacer l'identifiant.
- Vous pouvez remplacer id (comme je vous l'ai montré, vous pouvez remplacer n'importe quel attribut), mais je pense qu'il est préférable d'utiliser django id générés, à moins que vous n'avez pas de contrôle sur eux (comme lorsque vous utilisez la 3ème partie de bibliothèques js ou qch..)
- form.fields??? il devrait être self.fields
InformationsquelleAutor mariodev
23

J'aime vraiment Dmitriy Sintsov de la réponse, mais il ne fonctionne pas. Voici une version qui ne fonctionne pas:
```
def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    for field in iter(self.fields):
        self.fields[field].widget.attrs.update({
            'class': 'form-control'
    })
```
mise à jour

ajouter cette condition pour une meilleure
```
if self.fields[field].widget.__class__.__name__ in ('AdminTextInputWidget' , 'Textarea' , 'NumberInput' , 'AdminURLFieldWidget', 'Select'): 
     self.fields[field].widget.attrs.update({ 'class': 'form-control' })
```
- C'est beaucoup mieux que d'avoir à former l'ensemble de Widget à chaque fois. J'ai créé une classe BasicForm qui s'étend formes.ModelForm qui fait cela. Je viens de prolonger BasicForm au lieu de modèle de formulaire et obtenir automatiquement des classes de bootstrap sur toutes les formes. Je suis allé une étape plus loin et ajouter les classes personnalisées classes css qui peut déjà être là. Voir ma réponse pour l'exemple de code.
InformationsquelleAutor Derick Hayes

Vous pouvez mettre à jour forms.py comme ci-dessous

class ProductForm(ModelForm):
    class Meta:
        model = Product
        exclude = ('updated', 'created')
        widgets={
                   "name":forms.TextInput(attrs={'placeholder':'Name','name':'Name','id':'common_id_for_imputfields','class':'input-class_name'}),
                   "description":forms.TextInput(attrs={'placeholder':'description','name':'description','id':'common_id_for_imputfields','class':'input-class_name'}),
                }

InformationsquelleAutor kali sharma

6

Version légèrement modifiée de l'excellent mariodev réponse, en ajoutant de la classe de bootstrap pour tous les champs de formulaire, donc je n'ai pas à re-créer le formulaire de saisie des widgets pour chaque champ manuellement (court Python 3.x super()):
```
class ProductForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields:
            self.fields[field].widget.attrs.update({
                'class': 'form-control'
            })
```
- Il fonctionne également si vous utilisez "l'auto.les champs" place de "l'auto.Méta.les champs".
- et l'auto.Méta.les champs ne fonctionne pas.
InformationsquelleAutor Dmitriy Sintsov

Ajouter à la réponse de Derick Hayes, j'ai créé une classe BasicForm qui s'étend formes.ModelForm qui ajoute le bootstrap classes pour chaque formulaire que l'étend.

Pour mes formes, je viens de prolonger BasicForm au lieu de modèle de formulaire et obtenir automatiquement des classes de bootstrap sur toutes les formes. Je suis allé une étape plus loin et ajouter les classes personnalisées classes css qui peut déjà être là.

class BaseModelForm(forms.ModelForm):

def __init__(self, *args, **kwargs):
    super(BaseModelForm, self).__init__(*args, **kwargs)
    # add common css classes to all widgets
    for field in iter(self.fields):
        #get current classes from Meta
        classes = self.fields[field].widget.attrs.get("class")
        if classes is not None:
            classes += " form-control"
        else:
            classes = "form-control"
        self.fields[field].widget.attrs.update({
            'class': classes
        })

InformationsquelleAutor hurlbz

add_class filtre pour l'ajout d'une classe CSS champ de formulaire:

 {% load widget_tweaks %}     
    <form enctype="multipart/form-data" action="{% url 'add_a_product' %}" method="post">
                 <div id="name">
                   {{form.name|add_class:"input-calss_name"}}
                 </div> 
                 <div id="description">
                   {{form.description|add_class:"input-calss_name"}}
                 </div> 
           </form>

django-widget-réglages de la bibliothèque

Si vous ne voulez pas avoir à remplacer les formulaires par défaut, c'est le chemin à parcourir! Je l'ai utilisé sur Django projets depuis des années. {% render_field field class+="form-check-input" %}

InformationsquelleAutor Sunny Multani

Vous pouvez effectuer les opérations suivantes:

class ProductForm(ModelForm):
    name = forms.CharField(label='name ', 
            widget=forms.TextInput(attrs={'placeholder': 'name '}))

InformationsquelleAutor Rafael Cabral

Vous devez vous connecter pour publier un commentaire.

mise à jour