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表單模板設計類

回答

相關問題