Django表单中的CSS样式

一尘不染

Django表单中的CSS样式

django

我想样式如下：

forms.py：

from django import forms

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

contact_form.html：

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>

例如，如何设置一个类或ID为subject，email，message以提供外部样式表到？

阅读 863

2020-03-26

共2个答案

一尘不染

摘自我的答案：如何在Django中使用

标记表单字段

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

要么

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'})

要么

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

以上是对完成所要询问内容的原始问题的代码进行的最简单的更改。如果你在其他地方重复使用表格，也可以避免重复。如果你使用Django的as_table / as_ul / as_p表单方法，则你的类或其他属性将正常工作。如果你需要完全控制以完全自定义渲染，则应明确记录在案

添加了更新的方法来为ModelForm指定小部件和属性。

2020-03-26

一尘不染

可以使用自定义模板过滤器来完成。考虑以这种方式呈现表单：

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subject是BoundField具有该as_widget()方法的实例。

你可以addclass在my_app / templatetags / myfilters.py中创建自定义过滤器：

from django import template

register = template.Library()

@register.filter(name='addclass')
def addclass(value, arg):
    return value.as_widget(attrs={'class': arg})

然后应用你的过滤器：

{% load myfilters %}

<form action="/contact/" method="post">
  {{ form.non_field_errors }}
  <div class="fieldWrapper">
    {{ form.subject.errors }}
    {{ form.subject.label_tag }}
    {{ form.subject|addclass:'MyClass' }}
    <span class="helptext">{{ form.subject.help_text }}</span>
  </div>
</form>

form.subjects然后将使用MyClassCSS类呈现。

2020-03-26