Django表单模板设计类

Django表单框架非常优秀，并通过以下方式呈现整个表单。Django表单模板设计类

{{ 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，应该有可能为给定的窗体类中的指定标签定义这些类。如果是的话，这应该是最好的方式去做。

如何添加设计器类来形成元素。你认为什么是最好的方式来添加它们。

来源

2009-07-18 Lakshman Prasad

如果你只是需要所有的标签都有一个特定的类，最好的方法是稍微改变标记和CSS。把<div>与全班同学周围的形式：

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

，使CSS定义如下：

div.field-title label { 
    ... 
}

来源

2009-07-18 07:58:32

我第二个这样做，注意事项：（1）如果您的目标是将所有标签与单一样式相关联。然后你可以调整你的CSS来匹配。例如，表单标签{background-color：red;但是，如果您想在不同的标签上使用不同的样式，那么这将不起作用 - 因为您在实际标签上没有类标签。 – joej 2009-07-19 00:44:44

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

来源

2009-07-18 07:52:50 Adam

我也搜索相同，只是增加了信息，如果你不知道的这个。

如果你想申请的CSS特定的领域，你可以提取各个表单字段像如下

如：表单字段name：

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

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

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

来源

2010-08-02 11:58:30

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

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

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

这样你就不需要在其他地方编辑任何东西。只要你愿意，你可以按照这种方式添加尽可能多的类到特定的字段。

来源

2018-03-03 09:20:20 nyx00

Django表单模板设计类

回答

相关问题