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

cgfeq70w  于 2023-10-21  发布在  Go
关注(0)|答案(5)|浏览(139)

我对Django很陌生。遵循一些教程,我已经成功地使用Python通用视图(通用视图)创建了一个表单
我有一个“问题”模型

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)

使用这个模型,我创建了一个视图类

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

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

nle07wnf

nle07wnf1#

您可以为Question编写一个模型表单,并将其传递给create视图,

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(QuestionForm, self).__init__(*args, **kwargs)
    self.fields['myfield1'].widget.attrs.update({'class' : 'myfieldclass'})

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

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

acruukt92#

我在基于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

你可以看到下面的结果。

好得多!

希望这能有所帮助,如果有问题,请随时发表评论。

nnt7mjpx

nnt7mjpx3#

class FooForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(FooForm, self).__init__(*args, **kwargs)
        self.fields['field1'].widget.attrs = { 'class': 'fooclass' }

    class Meta:
        model = FooModel
        fields = ['field1', 'field2']

你不能直接将css添加到CreateView,因为你需要创建一个ModelForm并在你的创建视图中使用form_class = FooForm,在这个ModelForm中,你可以为字段使用特定的类,并根据需要使用css来样式化它们。

nnsrf1az

nnsrf1az4#

最好的方法是覆盖get_form函数。

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

    def get_form(self, form_class=None):
        form = super(QuestionCreate, self).get_form(form_class)
        form['MyField'].field.widget.attrs.update({'class' : 'MyClass'})
        return form

或者,如果你想将属性添加到所有字段中,你可以使用for循环,如下所示:

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

    def get_form(self, form_class=None):
        form = super(OPCCreateView, self).get_form(form_class)
        for visible in form.visible_fields():
            visible.field.widget.attrs.update({'class' : 'MyClass'})
        return form
wj8zmpe1

wj8zmpe15#

如果我们想对呈现的表单进行一些bootstrap样式化,我们可以使用django-crispy-forms:

pip install django-crispy-forms

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

相关问题