在django Forms中定义css类
假设我有一个表单
class SampleClass(forms.Form): name = forms.CharField(max_length=30) age = forms.IntegerField() django_hacker = forms.BooleanField(required=False) 有没有办法让我在每个字段上定义css类，以便我可以在我的呈现页面中使用基于类的jQuery？
我希望不必手动构build表单。
另一个不需要修改python代码的解决scheme对于devise者和一次性的表示性修改来说更好： django-widget-tweaks 。 希望有人会觉得有用。
回答我自己的问题。 叹
http://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.Widget.attrs
我没有意识到它被传递到小部件的构造函数。
在声明类中的字段之后，这是另一个在窗口小部件中添加类定义的解决scheme。
def __init__(self, *args, **kwargs): super(SampleClass, self).__init__(*args, **kwargs) self.fields['name'].widget.attrs['class'] = 'my_class'
使用django-widget-tweaks ，它很容易使用，工作得很好。
否则，可以使用自定义模板filter来完成。
考虑到你以这种方式呈现你的表单：
<form action="/contact/" method="post"> {{ form.non_field_errors }} <div class="fieldWrapper"> {{ form.subject.errors }} <label for="id_subject">Email subject:</label> {{ form.subject }} </div> </form>
form.subject是具有as_widget方法的BoundField的一个实例。
您可以在“my_app / templatetags / myfilters.py”中创build自定义filter“addcss”
from django import template register = template.Library() @register.filter(name='addcss') def addcss(value, arg): css_classes = value.field.widget.attrs.get('class', None).split(' ') if css_classes and arg not in css_classes: css_classes = '%s %s' % (css_classes, arg) return value.as_widget(attrs={'class': css_classes})
然后应用你的filter：
{% load myfilters %} <form action="/contact/" method="post"> {{ form.non_field_errors }} <div class="fieldWrapper"> {{ form.subject.errors }} <label for="id_subject">Email subject:</label> {{ form.subject|addcss:'MyClass' }} </div> </form>
form.subjects然后将被呈现与“MyClass”css类。
希望这个帮助。
编辑
-
根据dimyG的回答更新filter
-
添加django-widget-tweak链接
扩展docs.djangoproject.com指向的方法：
class MyForm(forms.Form): comment = forms.CharField( widget=forms.TextInput(attrs={'size':'40'}))
我认为必须知道每个字段的本机窗口小部件types是很麻烦的，并且认为重写默认只是为了在窗体字段上放置一个类名是很有趣的。 这似乎为我工作：
class MyForm(forms.Form): #This instantiates the field w/ the default widget comment = forms.CharField() #We only override the part we care about comment.widget.attrs['size'] = '40'
这对我来说似乎有点干净。
如果您希望表单中的所有字段都inheritance某个类，那么您只需定义一个inheritance自forms.ModelForm的父类，然后inheritance它
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'类添加到应用程序的所有表单上的所有字段，而不添加代码的复制。
这是简单的方法来改变视图。 在传入模板之前添加下面的视图。
form = MyForm(instance = instance.obj) form.fields['email'].widget.attrs = {'class':'here_class_name'}
这是上面的一个变种，它将给所有的领域相同的类（例如jquery漂亮的圆angular）。
# Simple way to assign css class to every field def __init__(self, *args, **kwargs): super(TranslatedPageForm, self).__init__(*args, **kwargs) for myField in self.fields: self.fields[myField].widget.attrs['class'] = 'ui-state-default ui-corner-all'
事实certificate，你可以在窗体构造函数（ init函数）中或在表单类启动后执行此操作。 如果你没有写自己的表格，而且这个表格是从别的地方来的，
def some_view(request): add_css_to_fields = ['list','of','fields'] if request.method == 'POST': form = SomeForm(request.POST) if form.is_valid(): return HttpResponseRedirect('/thanks/') else: form = SomeForm() for key in form.fields.keys(): if key in add_css_to_fields: field = form.fields[key] css_addition = 'css_addition ' css = field.widget.attrs.get('class', '') field.widget.attrs['class'] = css_addition + css_classes return render(request, 'template_name.html', {'form': form})
如果你想添加一个类到模板中的表单字段（而不是在view.py或form.py中），例如在你想修改第三方应用而不覆盖其视图的情况下，在Charlesthk 回答非常方便。 但是在这个答案中，模板filter将覆盖该字段可能具有的所有现有类。
我试图添加这个作为一个编辑，但它被build议写为一个新的答案。
所以，这是一个模板标签，尊重现有的字段types：
from django import template register = template.Library() @register.filter(name='addclass') def addclass(field, given_class): existing_classes = field.field.widget.attrs.get('class', None) if existing_classes: if existing_classes.find(given_class) == -1: # if the given class doesn't exist in the existing classes classes = existing_classes + ' ' + given_class else: classes = existing_classes else: classes = given_class return field.as_widget(attrs={"class": classes})
你也可以使用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'), ) )
只需将这些类添加到您的表单中，如下所示。
class UserLoginForm(forms.Form): username = forms.CharField(widget=forms.TextInput( attrs={ 'class':'form-control', 'placeholder':'Username' } )) password = forms.CharField(widget=forms.PasswordInput( attrs={ 'class':'form-control', 'placeholder':'Password' } ))
