Пользовательский CSS для входов формы Django

Я думаю, что рендеринг HTML-формы для вас — это одно из самых больших удобств Django.

Недостатком является то, что структура сгенерированной формы не настраивается. Если у вас специфический дизайн и вам нужно разместить входы в другом месте, Django дает вам возможность отрисовать каждый элемент отдельно на уровне элемента управления вводом следующим образом:

<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Subject:</label>
    {{ form.subject }}
</div>

Войти в полноэкранный режим Выйти из полноэкранного режима

template.html

Но проблема настройки все еще остается: вы не можете задать пользовательские классы для отдельных элементов управления вводом. {{ form.subject }} отобразит элемент управления вводом, не давая вам возможности установить пользовательский класс.

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

Одним из решений является установка этих классов в объекте Form:

class ExampleForm(forms.Form):
   subject = forms.CharField(
       widget=forms.TextInput(attrs={'class':'input-text'}))
   enabled = forms.BooleanField(
       widget=forms.TextInput(attrs={'class':'input-checkbox'}))

Вход в полноэкранный режим Выход из полноэкранного режима

forms.py

Но, на мой взгляд, это создает другую проблему. Объект Form должен моделировать форму с ее типами данных входов и любыми другими требованиями бизнес-логики. Он не должен отвечать за стилизацию и другие визуальные атрибуты. Местом для таких инструкций по стилизации является шаблон.

К сожалению, я думаю, что в Django нет встроенного способа сделать это без использования внешней библиотеки. Но не бойтесь. Существует небольшая и легкая библиотека, которая делает именно это, называется django-widget-tweaks.

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

{% load widget_tweaks %}

<div class="fieldWrapper">
    {{ form.subject.errors }}
    <label for="{{ form.subject.id_for_label }}">Subject:</label>
    {{ form.subject|add_class:"input-text" }}
</div>

<div class="fieldWrapper">
    {{ form.enabled.errors }}
    <label for="{{ form.enabled.id_for_label }}">Enabled:</label>
    {{ form.enabled|add_class:"input-checkbox" }}
</div>

Вход в полноэкранный режим Выйти из полноэкранного режима

template.html

Библиотека предлагает довольно много других возможностей по настройке элементов управления формой. Если это вызвало у вас интерес, посмотрите!

Надеюсь, вы узнали способ настройки форм Django без смешивания инструкций по стилизации в модели Form.

Счастливого кодинга!