假设我有一张表格

class SampleClass(forms.Form):
    name = forms.CharField(max_length=30)
    age = forms.IntegerField()
    django_hacker = forms.BooleanField(required=False)

是否有一种方法为我定义css类在每个字段,这样我就可以使用jQuery基于类在我渲染的页面?

我希望不必手动构建表单。


当前回答

这里有一个简单的方法来改变观点。在将它传递到模板之前,在视图中添加下面的内容。

form = MyForm(instance = instance.obj)
form.fields['email'].widget.attrs = {'class':'here_class_name'}

其他回答

回答我自己的问题。叹息

http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs

我没有意识到它被传递到小部件构造函数中。

你可以在这里获得各种输入字段的样式选项

小部件是Django对HTML输入元素的表示。小部件处理HTML的呈现,以及从与小部件对应的GET/POST字典中提取数据。

email = forms.EmailField(label='Your email', widget=forms.EmailInput(attrs={'class': 'ui segment teal'}))

你也可以使用Django Crispy Forms,这是一个很好的定义表单的工具,如果你想使用一些CSS框架,比如Bootstrap或Foundation。在这里为表单字段指定类很容易。

你的表单类会是这样的:

from django import forms

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Div, Submit, Field
from crispy_forms.bootstrap import FormActions

class SampleClass(forms.Form):
    name = forms.CharField(max_length=30)
    age = forms.IntegerField()
    django_hacker = forms.BooleanField(required=False)

    helper = FormHelper()
    helper.form_class = 'your-form-class'
    helper.layout = Layout(
        Field('name', css_class='name-class'),
        Field('age', css_class='age-class'),
        Field('django_hacker', css-class='hacker-class'),
        FormActions(
            Submit('save_changes', 'Save changes'),
        )
    )

如果您希望表单中的所有字段都继承某个类,只需定义一个父类,从表单继承。ModelForm,然后继承它

class BaseForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(BaseForm, self).__init__(*args, **kwargs)
        for field_name, field in self.fields.items():
            field.widget.attrs['class'] = 'someClass'


class WhateverForm(BaseForm):
    class Meta:
        model = SomeModel

这帮助我自动将“form-control”类添加到应用程序的所有表单上的所有字段,而不需要添加代码复制。

下面是在类中声明字段后向小部件添加类定义的另一种解决方案。

def __init__(self, *args, **kwargs):
    super(SampleClass, self).__init__(*args, **kwargs)
    self.fields['name'].widget.attrs['class'] = 'my_class'