Le style CSS dans Django formes

Pris de ma réponse:
Comment balisage des champs de formulaire avec des <div class='type_champ" > dans Django

class MyForm(forms.Form):
    myfield = forms.CharField(widget=forms.TextInput(attrs={'class' : 'myfieldclass'}))

ou

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel

    def __init__(self, *args, **kwargs):
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields['myfield'].widget.attrs.update({'class' : 'myfieldclass'})

ou

class MyForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'myfield': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

--- EDIT ---

Le ci-dessus est le changement le plus simple à faire à la question d'origine du code qui accomplit ce qui a été demandé. Il vous permet également de vous répéter, si vous réutilisez le formulaire dans d'autres endroits; vos classes ou d'autres attributs d'un travail juste si vous utilisez le Django as_table/as_ul/as_p méthodes de formulaire. Si vous avez besoin d'un contrôle total pour un complètement personnalisée de rendu, c'est clairement documentées

-- EDIT 2 ---

Ajout d'une nouvelle méthode pour spécifier widget et attrs pour un ModelForm.

Si vous ne voulez pas ajouter de tout code pour le formulaire (comme mentionné dans les commentaires de @shadfc de Réponse), il est certainement possible, voici deux options.

Tout d'abord, vous venez de référence les domaines individuellement dans le code HTML, plutôt que l'ensemble de la forme à la fois:

<form action="" method="post">
    <ul class="contactList">
        <li id="subject" class="contact">{{ form.subject }}</li>
        <li id="email" class="contact">{{ form.email }}</li>
        <li id="message" class="contact">{{ form.message }}</li>
    </ul>
    <input type="submit" value="Submit">
</form>

(À noter que j'ai aussi changé d'un non triés liste.)

Deuxième, remarque dans les docs sur la sortie des formulaires HTML, Django:

Le Champ id est généré par
ajoutant 'id_' pour le nom du Champ.
Les attributs id et les étiquettes sont
inclus dans la sortie par défaut.

Tous vos champs de formulaire ont déjà un unique id. Donc vous l'référence id_subject dans votre fichier CSS pour le style de la sujet champ. Je tiens à souligner, c'est la façon dont la forme se comporte lorsque vous prenez le par défaut HTML, ce qui nécessite juste l'impression de la forme, pas les champs individuels:

<ul class="contactList">
    {{ form }}  # Will auto-generate HTML with id_subject, id_email, email_message 
    {{ form.as_ul }} # might also work, haven't tested
</ul>

Voir le lien précédent pour d'autres options lors de la sortie de formes (vous pouvez le faire tableaux, etc).

Remarque - je me rends compte que ce n'est pas le même que l'ajout d'un classe à chaque élément (si vous avez ajouté un champ dans le Formulaire, vous aurez besoin de mettre à jour le CSS aussi) - mais il est assez facile de faire référence à tous les champs par id dans votre CSS, comme ceci:

#id_subject, #id_email, #email_message 
{color: red;}

Par cette blog, vous pouvez ajouter des classes css pour vos champs à l'aide d'un modèle personnalisé filtre.

from django import template
register = template.Library()

@register.filter(name='addcss')
def addcss(field, css):
    return field.as_widget(attrs={"class":css})

Mettre cela dans votre application templatetags/dossier et vous pouvez maintenant faire

{{field|addcss:"form-control"}}

Que vous pouvez faire:

<form action="" method="post">
    <table>
        {% for field in form %}
        <tr><td>{{field}}</td></tr>
        {% endfor %}
    </table>
    <input type="submit" value="Submit">
</form>

Ensuite, vous pouvez ajouter des classes/id, par exemple, la <td> tag. Vous pouvez bien sûr utiliser d'autres balises que vous souhaitez. Vérifier Travailler avec Django formes comme un exemple de ce qui est disponible pour chaque field dans la forme ( {{field}} , par exemple, est juste à la sortie de la balise d'entrée, pas l'étiquette et ainsi de suite).

Vous ne pouvez pas besoin de remplacer votre formulaire de la classe de __init__, parce que Django jeux de name & id attributs dans le code HTML inputs. Vous pouvez avoir CSS comme ceci:

form input[name='subject'] {
    font-size: xx-large;
}

Il est très facile à installer et grand outil fait pour Django que j'utilise pour le style et il peut être utilisé pour chaque interface framework comme Bootstrap, se Matérialiser, Fondation, etc. Il est appelé widget-réglages de la Documentation: Widget Réglages

1. Vous pouvez l'utiliser avec Django générique vues
2. Ou avec vos propres formulaires:

de django formulaires d'importation

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    email = forms.EmailField(required=False)
    message = forms.CharField(widget=forms.Textarea)

Au lieu d'utiliser par défaut:

{{ form.as_p }} or {{ form.as_ul }}

Vous pouvez le modifier à votre guise à l'aide de la render_field attribut qui vous donne un plus html-comme la manière de style comme dans cet exemple:

template.html

{% load widget_tweaks %}

<div class="container">
   <div class="col-md-4">
      {% render_field form.subject class+="form-control myCSSclass" placeholder="Enter your subject here" %}
   </div>
   <div class="col-md-4">
      {% render_field form.email type="email" class+="myCSSclassX myCSSclass2" %}
   </div>
   <div class="col-md-4">
      {% render_field form.message class+="myCSSclass" rows="4" cols="6" placeholder=form.message.label %}
   </div>
</div>

Cette bibliothèque vous donne la possibilité d'avoir bien séparés yout extrémité avant à partir de votre backend

Edit: un Autre (un peu mieux) façon de faire que je suggère, c'est la réponse ici: Django champ de saisie style

Toutes les options ci-dessus génial, juste pensé que je le jeter dans parce que c'est différent.

Si vous voulez le style personnalisé, des cours, etc. sur vos formulaires, vous pouvez faire une entrée html de votre modèle qui correspond à votre champ de formulaire. Pour un CharField, par exemple, (widget par défaut est TextInput), disons que vous voulez un bootstrap à la recherche d'entrée de texte. Vous faites quelque chose comme cela:

<input type="text" class="form-control" name="form_field_name_here">

Et aussi longtemps que vous mettez le nom de champ correspond à l'html name attribut n', (et le widget doit probablement correspondre au type d'entrée ainsi) Django fonctionnera tout de même validateurs sur le champ lorsque vous exécutez validate ou form.is_valid() et

Style d'autres choses comme les labels, les messages d'erreur, et le texte de l'aide ne requièrent pas beaucoup de solution, parce que vous pouvez faire quelque chose comme form.field.error.as_text et le style comme vous le souhaitez. La réelle champs sont ceux qui nécessitent d'origine.

Je ne sais pas si c'est la meilleure façon, ou la façon dont je le recommande, mais c'est une façon, et il pourrait être bon pour quelqu'un.

Voici un bon de procédure pas à pas de style, et qui comprend la plupart des réponses répertoriées sur SI (comme l'utilisation de l'attribut sur les widgets et le widget réglages).
https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html