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添加类名。