CSS-стилизация в формах Django

Question

Мне бы хотелось написать следующее:

forms.py:

from django import forms

class ContactForm(forms.Form):
    subject = forms.CharField(max_length=100)
    email = forms.EmailField(required=False)
    message = forms.CharField(widget=forms.Textarea)

contact_form.html:

<form action="" method="post">
  <table>
    {{ form.as_table }}
  </table>
  <input type="submit" value="Submit">
</form>

Например, как мне установить class или ID для subject, email, message, чтобы предоставить внешнюю таблицу стилей для?

Answer 1

Вам может не потребоваться переопределить ваш класс формы '__init__, потому что Django устанавливает атрибуты name & id в HTML input s.Вы можете использовать CSS следующим образом:

form input[name='subject'] {
    font-size: xx-large;
}

Answer 2

В Django 1.10 (возможно, и раньше) вы можете сделать это следующим образом.

Модель:

class Todo(models.Model):
    todo_name = models.CharField(max_length=200)
    todo_description = models.CharField(max_length=200, default="")
    todo_created = models.DateTimeField('date created')
    todo_completed = models.BooleanField(default=False)

    def __str__(self):
        return self.todo_name

Форма:

class TodoUpdateForm(forms.ModelForm):
    class Meta:
        model = Todo
        exclude = ('todo_created','todo_completed')

Шаблон:

<form action="" method="post">{% csrf_token %}
    {{ form.non_field_errors }}
<div class="fieldWrapper">
    {{ form.todo_name.errors }}
    <label for="{{ form.name.id_for_label }}">Name:</label>
    {{ form.todo_name }}
</div>
<div class="fieldWrapper">
    {{ form.todo_description.errors }}
    <label for="{{ form.todo_description.id_for_label }}">Description</label>
    {{ form.todo_description }}
</div>
    <input type="submit" value="Update" />
</form>

Answer 3

Стилизация экземпляров виджета

Если вы хотите, чтобы один экземпляр виджета отличался от другого, вам нужно будет указать дополнительные атрибуты во время создания экземпляра объекта виджета и присвоения его полю формы (и, возможно, добавить некоторые правила в ваши CSS-файлы).

https://docs.djangoproject.com/en/2.2/ref/forms/widgets/

Для этого вы используете аргумент Widget.attrs при создании виджета:

class CommentForm(forms.Form):
    name = forms.CharField(widget=forms.TextInput(attrs={'class': 'special'}))
    url = forms.URLField()
    comment = forms.CharField(widget=forms.TextInput(attrs={'size': '40'}))

Вы также можете изменить виджет в определении формы:

class CommentForm(forms.Form):
    name = forms.CharField()
    url = forms.URLField()
    comment = forms.CharField()

    name.widget.attrs.update({'class': 'special'})
    comment.widget.attrs.update(size='40')

Или, если поле не объявлено непосредственно в форме (например, поля формы модели), вы можете использовать атрибут Form.fields:

class CommentForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['name'].widget.attrs.update({'class': 'special'})
        self.fields['comment'].widget.attrs.update(size='40')

Затем Django включит дополнительные атрибуты в визуализированный вывод:

>>> f = CommentForm(auto_id=False)
>>> f.as_table()
<tr><th>Name:</th><td><input type="text" name="name" class="special" required></td></tr>
<tr><th>Url:</th><td><input type="url" name="url" required></td></tr>
<tr><th>Comment:</th><td><input type="text" name="comment" size="40" required></td></tr>

Answer 4

Редактировать: Ответ на еще один (чуть лучший) способ сделать то, что я предлагаю, приведен здесь: Стили поля ввода формы Django

Все вышеперечисленные опцииКруто, просто подумала, что я добавлю это, потому что оно отличается.

Если вы хотите, чтобы в ваших формах использовались пользовательские стили, классы и т. д., вы можете сделать html-ввод в свой шаблон, соответствующий полю формы.Например, для CharField (виджет по умолчанию - TextInput), допустим, вы хотите ввод текста в виде начальной загрузки.Вы должны сделать что-то вроде этого:

<input type="text" class="form-control" name="form_field_name_here">

И пока вы вводите имя поля формы, соответствует атрибуту html name, (и виджет, вероятно, должен соответствовать входным даннымвведите также) Django будет запускать все те же валидаторы в этом поле, когда вы запускаете validate или form.is_valid() и

Стилирование других вещей, таких как метки, сообщения об ошибках и текст справки, не требует много обходных путей, потомуВы можете сделать что-то вроде form.field.error.as_text и стилизовать их так, как хотите.Фактические поля - те, которые требуют некоторой возни.

Я не знаю, является ли это лучшим способом, или способом, который я рекомендовал бы, но это - способ, и это могло бы быть правильным для кого-то.

Вот полезное пошаговое руководство по оформлению стилей, и оно включает в себя большинство ответов, перечисленных в SO (например, использование attr для виджетов и настройки виджетов).https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html