css - 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>

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

还是从表单类或 View 中提供一些类更好，这看起来有点难看。

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

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

Answer 1

如果您只需要所有标签都有一个特定的类，最好的方法是稍微更改标记和 CSS。放一个<div>与您的类(class)围绕表格:

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

并使CSS定义如下:

div.field-title label {
    ...
}