在 Django 中覆盖表单模板的样式答案

【问题标题】：Override the Style of Form templates in Django在 Django 中覆盖表单模板的样式
【发布时间】：2015-02-25 13:38:35
【问题描述】：

我是 django 的新手，我正在 django 上构建一个表单，并找到了 django 的内置表单并实现了它。

从 django 文档中，它说form.subject 将在其中放入一个<input type="text">。但是，如果我想更改此输入元素的属性，例如高度、字体、文本、宽度等，该怎么办。

{{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Email subject:</label>
    {{ form.subject }}
</div>
<div class="fieldWrapper">
    {{ form.message.errors }}
    <label for="{{ form.message.id_for_label }}">Your message:</label>
    {{ form.message }}
</div>
<div class="fieldWrapper">
    {{ form.sender.errors }}
    <label for="{{ form.sender.id_for_label }}">Your email address:</label>
    {{ form.sender }}
</div>
<div class="fieldWrapper">
    {{ form.cc_myself.errors }}
    <label for="{{ form.cc_myself.id_for_label }}">CC yourself?</label>
    {{ form.cc_myself }}
</div>

【问题讨论】：

标签： python css django forms

【解决方案1】：

为此使用 jquery。

每个 django 表单元素都有其唯一的 id。使用该 id 使用 jquery 应用 css 属性。

使用 id 访问表单元素。

$('#id_subject').addClass('form-group'); #  formgroup is a bootstrap class.
 or 
$('#id_subject').css('height', '10px');

在此处应用您想要的任何 css 属性。加载页面后，应应用此属性，即在 jquery 中的 document.ready 上。

【讨论】：

【解决方案2】：

正如documentation 中所指出的，您可以添加 css 类：

class CommentForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))

假设您熟悉 css，您现在可以将样式应用于该字段。

有一种方法可以设置所有小部件的样式，但通常需要对 python 和 django 有更好的了解。

另一种选择是使用一些允许这样做的 django 应用程序，例如 crispy-forms 或 floppy-forms

【讨论】：