Django形式的CSS样式

Question

如何设置以下样式:

在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以提供外部样式表？谢谢

Answer 1

取自我的回答: 如何在Django中用<div class ='field_type'>标记表单字段

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表单方法,你的类或其他属性就可以正常工作.如果您需要完全控制完全自定义渲染,则可以清楚地记录下来

- 编辑2 ---
添加了一种更新的方法来为ModelForm指定widget和attrs.

Answer 2

这可以使用自定义模板过滤器完成.考虑到你以这种方式渲染表单:

<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方法.

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

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>

然后使用"MyClass"css类呈现form.subjects.

希望这有帮助.

Answer 3

如果您不想在表单中添加任何代码(如@ shadfc的答案中的评论中所述),这当然是可能的,这里有两个选项.

首先,您只需在HTML中单独引用字段,而不是一次引用整个表单:

<form action="" method="post">
    <ul class="contactList">
        <li id="subject" class="contact">{{ form.subject }}</li>
        <li id="email" class="contact">{{ form.email }}</li>
        <li id="message" class="contact">{{ form.message }}</li>
    </ul>
    <input type="submit" value="Submit">
</form>

(请注意,我还将其更改为未排序的列表.)

其次,在关于将表单输出为HTML,Django 的文档中注意:

字段ID是通过在字段名称前加上"id_"生成的.默认情况下,id属性和标记包含在输出中.

您的所有表单字段都已具有唯一ID.因此,您可以在CSS文件中引用id_subject来设置主题字段的样式.我应该注意,这是表单采用默认 HTML 时的行为方式,只需要打印表单,而不是单个字段:

<ul class="contactList">
    {{ form }}  # Will auto-generate HTML with id_subject, id_email, email_message 
    {{ form.as_ul }} # might also work, haven't tested
</ul>

输出表单时可以查看上一个链接以了解其他选项(您可以执行表格等).

注意 - 我意识到这与向每个元素添加一个类不同(如果你在Form中添加了一个字段,你也需要更新CSS) - 但是通过id引用所有字段很容易在你的CSS中像这样:

#id_subject, #id_email, #email_message 
{color: red;}

Answer 4

根据此博文,您可以使用自定义模板过滤器向您的字段添加css类.

from django import template
register = template.Library()

@register.filter(name='addcss')
def addcss(field, css):
    return field.as_widget(attrs={"class":css})

把它放在你的应用程序的templatetags /文件夹中,你现在可以做到

{{field|addcss:"form-control"}}

Answer 5

你可以这样做:

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    subject.widget.attrs.update({'id' : 'your_id'})

希望有效.

Ignas

Answer 6

您可以使用此库:https://pypi.python.org/pypi/django-widget-tweaks

它允许您执行以下操作:

{% load widget_tweaks %}
<!-- add 2 extra css classes to field element -->
{{ form.title|add_class:"css_class_1 css_class_2" }}

Answer 7

你可以做:

<form action="" method="post">
    <table>
        {% for field in form %}
        <tr><td>{{field}}</td></tr>
        {% endfor %}
    </table>
    <input type="submit" value="Submit">
</form>

然后,您可以将类/ id添加到例如<td>标记中.您当然可以使用您想要的任何其他标签.检查使用Django表单作为示例表单中的每个field表单可用的内容({{field}}例如,只输出输入标记,而不是标签等).

Answer 8

像这样写你的表格：

    class MyForm(forms.Form):
         name = forms.CharField(widget=forms.TextInput(attr={'class':'name'}),label="Your Name")
         message = forms.CharField(widget=forms.Textarea(attr={'class':'message'}), label="Your Message")

在您的 HTML 字段中执行以下操作：

{% for field in form %}
      <div class="row">
        <label for="{{ field.name}}">{{ field.label}}</label>{{ field }}
     </div>
{% endfor %}

然后在你的 CSS 中写一些类似的东西：

.name{
      /* you already have this class so create it's style form here */
}
.message{
      /* you already have this class so create it's style form here */
}
label[for='message']{
      /* style for label */
}

希望这个答案值得一试！请注意，您必须编写视图来呈现包含表单的 HTML 文件。