如何为使用Django CreateView创建的表单添加自定义样式

Question

我是Django的新手。在一些教程之后，我设法使用Python通用视图创建表单（ CreateView ）

我有一个'问题'模型

class Question(models.Model):
    title = models.CharField(max_length=200)
    body = models.TextField(max_length=2000)
    category = models.CharField(max_length=50)
    votes = models.IntegerField(default=0)
    asked_date = models.DateTimeField(default=datetime.now)

并使用此模型创建了一个View Class

class QuestionCreate(CreateView):
    model = Question
    fields = ['title', 'body', 'category']

这确实会生成一个漂亮的HTML表单。但是如何将CSS属性传递给每个字段？

Answer 1

您可以为Question编写模型表单并将其传递给创建视图

class QuestionForm(forms.ModelForm):

    class Meta:
        model = Question
        fields = ('myfield1', 'myfield2) 
        widgets = {
        'myfield1': forms.TextInput(attrs={'class': 'myfieldclass'}),
        }

或者你可以覆盖init方法来为每个字段指定某个类，

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

然后，将其传递给form_class的属性CreateView，

class QuestionCreate(CreateView):
    model = Question
    form_class = QuestionForm

Answer 2

css

您无法直接将CreateView添加到ModelForm，因为您需要创建form_class = FooForm并在创建视图中使用ModelForm，并在此{{1}您可以对字段使用特定的类，并使用css根据需要设置样式

Answer 3

如果我们要对呈现的表单进行一些引导样式，则可以使用django-crispy-forms：

pip install django-crispy-forms

然后将“ crispy-forms”添加到已安装的应用程序。
在表单模板页面中加载crispy_form_tags，并使用{{form | crispy}}代替{{form}}。

Crispy的文档。

Answer 4

在基于Bootstrap框架的Django应用程序中，我遇到了类似的问题。我的第一次尝试：

# views.py
from django.views.generic.edit import UpdateView
from . import models

class ModuleUpdateView(UpdateView):
    model = models.Module
    fields = ['name', 'description', 'status']

如下所示：

的确不是很好！第二次尝试意味着为我的视图定义一个自定义 ModelForm 并在其中应用所有自定义项：

# forms.py
from .models import Module

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

    class Meta:
        model = Module
        fields = ['name', 'description', 'status']

请注意__init__中的 for 循环，该循环将 form-control CSS类添加到所有可见的表单字段中。 form-control 的CSS样式由Bootstrap提供，因此我什至不必修改样式表。

一旦有了自定义的 ModelForm ，我可以按如下方式重写View类：

# views.py
from django.views.generic.edit import UpdateView
from . import forms, models

class ModuleUpdateView(UpdateView):
    model = models.Module
    form_class = forms.ModuleForm

，您可以在下面看到结果。

更好！

希望如此，希望在出现问题时发表评论。