Django 表单模板设计类答案

【问题标题】：Django Forms Template design classesDjango 表单模板设计类
【发布时间】：2010-11-11 22:18:14
【问题描述】：

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>

将这些类添加到单个表单元素的标准方法是什么。是否需要在模板中手动展开表单来添加这些类（这种情况下，表单的变化也要在模板中做出相应的变化）；这太费力了，特别是因为您需要为每个字段添加 if 错误、显示错误。

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

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

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

【问题讨论】：

标签： css django forms templates

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

例如：表单字段name:

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

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

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

【讨论】：

【解决方案3】：

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

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

并按如下方式定义CSS：

div.field-title label {
    ...
}

【讨论】：

我支持这一点，但需要注意的是：(1) 如果您的目标是让所有标签与单一样式相关联。然后你可以简单地调整你的 CSS 来匹配。例如，表单标签 { 背景颜色：红色； } (2) 但是，如果您想在不同的标签上使用不同的样式，那么这将不起作用——因为您在实际标签上没有类标签。

【解决方案4】：

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

【讨论】：