Джанго Формы Шаблоны дизайна классов

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.

Answer 3

Вот аналогичный вопрос: Добавить класс в вывод Django label_tag () . Я не уверен, подойдет ли выбранный вами ответ на этот вопрос или нет.

Answer 4

Добавление класса непосредственно в поле формы в качестве атрибута, казалось СУХИМЫМ способом для меня.

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

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

Таким образом, вам не нужно ничего редактировать где-либо еще. Таким способом вы можете добавить столько классов к определенным полям, сколько захотите.