Django Forms模板设计类

Question

Django Forms框架非常出色，只需通过以下方式呈现整个表单。

{{ form.as_p }}

对于注册表单，它将上面转换为：

<p><label for="id_username">Username:</label> <input id="id_username" type="text" name="username" maxlength="30" /> Required. 30 characters or fewer. Alphanumeric characters only (letters, digits and underscores).</p>
<p><label for="id_email">Email:</label> <input type="text" name="email" id="id_email" /></p>
<p><label for="id_firstname">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p>
<p><label for="id_lastname">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" id="id_password1" /></p>
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p>

但是为了设计我想在表单中为每个元素添加类，如下所示：

<p><label for="id_email" class="field-title">Email:</label> <input type="text" name="email" id="id_email" /></p>
<p><label for="id_firstname" class="field-title">Firstname:</label> <input type="text" name="firstname" id="id_firstname" /></p>
<p><label for="id_lastname" class="field-title">Lastname:</label> <input type="text" name="lastname" id="id_lastname" /></p>
<p><label for="id_password1" class="field-title">Password:</label> <input type="password" name="password1" id="id_password1" /></p>
<p><label for="id_password2" class="field-title">Password confirmation:</label> <input type="password" name="password2" id="id_password2" /></p>

将这些类添加到单个表单元素的标准方法是什么。是否有必要手动扩展模板中的表单以添加这些类（在这种情况下，表单中的更改也应在模板中进行相应的更改）;这太费力了，特别是因为您需要添加错误，还会为每个字段显示错误。

或者从表单类或视图中提供一些类更好，这看起来有点难看。

我不太了解css，应该可以在表单的给定类中为指定的标记定义这些类。如果是的话，这应该是最好的方法。

如何将表达式类添加到表单元素中。您认为添加它们的最佳方式是什么？

Answer 1

如果您只需要所有标签都有特定的类，最好的方法是稍微更改标记和CSS。在表格周围放一个<div>和你的班级：

<div class="field-title">
    {{ form.as_p }}
</div>

并使CSS定义如下：

div.field-title label {
    ...
}

Answer 2

我也在搜索相同的内容，如果您不知道这一点，只需添加信息。

如果要将css应用于特定字段，可以提取单个表单字段，如下所示

例如：表格字段name：

{{ form.name.label }}
{{ form.name.errors }}
{{ form.name }}
{{ form.name.help_text }}

现在，您可以提供自己的格式，而不是{{ form.name.label }}。

另一种方法是通过javascript添加classname。

Answer 3

这是一个类似的问题：Add class to Django label_tag() output。我不确定所选择的答案是否符合您的需求。

Answer 4

将类直接添加到表单字段作为属性，对我来说似乎是最干净的方式。

name = forms.CharField(widget=forms.TextInput(attrs={"class":"form-control"}))

message = forms.CharField(widget=forms.Textarea(attrs={"class":"form-control bar foo"}))

这样您就不需要在其他任何地方编辑任何内容。您可以根据需要以这种方式向特定字段添加任意数量的类。