Django Forms 5편 : CSS를 활용한 스타일링

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

1. Основные HTML формы и Django Forms

1.1 Основной способ вывода Django Forms

Django Forms автоматически генерирует HTML. Основной способ вывода выглядит следующим образом:

• as_p: оборачивает каждое поле в <p> тег.
• as_table: отображает каждое поле в <tr> тег.
• as_ul: оборачивает каждое поле в <li> тег.

Пример: Основной способ вывода

class ExampleForm(forms.Form):
    name = forms.CharField(label="Ваше имя")
    email = forms.EmailField(label="Ваш Email")
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Отправить</button>
</form>

Код выше будет выведен в базовом стиле, обернутом в <p> тег.

2. Стилизация формы с помощью CSS

2.1 Применение стиля с помощью attrs и Bootstrap

Используя атрибут attrs, вы можете добавить CSS классы непосредственно в HTML теги. Это позволяет легко применять CSS фреймворки, такие как Bootstrap.

Пример: Применение стиля с помощью attrs с Bootstrap

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваше имя пользователя'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваш пароль'
        })
    )

Отображение формы в шаблоне

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Имя пользователя</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Пароль</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Пример результата HTML

<input type="text" name="username" class="form-control" placeholder="Введите ваше имя пользователя">
<input type="password" name="password" class="form-control" placeholder="Введите ваш пароль">

2.2 Стилизация формы с использованием Bootstrap

Пример: Применение стиля Bootstrap

class BootstrapForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваше имя пользователя'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваш пароль'
        })
    )

Отображение формы в шаблоне

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Имя пользователя</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_password">Пароль</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
</form>

Результат на экране

• Будут отрисованы поля формы и кнопки со стилями Bootstrap.

3. Использование Django FormHelper и библиотек

3.1 Введение в django-crispy-forms

django-crispy-forms предлагает лучшую стилизацию и управление макетом для Django Forms.

Установка

pip install django-crispy-forms

Настройки

Добавьте следующее в settings.py:

INSTALLED_APPS += [
    'crispy_forms',
]
CRISPY_ALLOWED_TEMPLATE_PACKS = ["bootstrap5"]
CRISPY_TEMPLATE_PACK = 'bootstrap5'

Определение формы

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Submit

class CrispyForm(forms.Form):
    email = forms.EmailField(label="Ваш Email")

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Отправить'))

Замечания

django-crispy-forms полезен для простой стилизации форм, но если не правильно сконфигурировать метод инициализации __init__, журнал отладки шаблона может стать чрезмерно большим. Если вы хотите поддерживать журнал файлов в чистоте, имейте это в виду. Это рекомендовано для разработчиков, которые отключают отладку или не обращают внимание на неразбериху в журнале, однако, мне лично этот способ стилизации не нравится. Чтобы предотвратить появление журналов отладки, необходимо правильно настроить метод инициализации, для чего нужно будет углубиться в анализ исходного кода, и, если я это сделаю, то просто выберу другой способ стилизации.

Использование в шаблоне

<form method="post">
    {% csrf_token %}
    {{ form|crispy }}
</form>

4. Практический пример: Стилизация формы регистрации

4.1 Определение формы

class SignupForm(forms.Form):
    username = forms.CharField(
        widget=forms.TextInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваше имя пользователя'
        })
    )
    email = forms.EmailField(
        widget=forms.EmailInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваш Email'
        })
    )
    password = forms.CharField(
        widget=forms.PasswordInput(attrs={
            'class': 'form-control',
            'placeholder': 'Введите ваш пароль'
        })
    )

4.2 Отображение в шаблоне

<form method="post">
    {% csrf_token %}
    <div class="form-group">
        <label for="id_username">Имя пользователя</label>
        {{ form.username }}
    </div>
    <div class="form-group">
        <label for="id_email">Email</label>
        {{ form.email }}
    </div>
    <div class="form-group">
        <label for="id_password">Пароль</label>
        {{ form.password }}
    </div>
    <button type="submit" class="btn btn-success">Зарегистрироваться</button>
</form>

5. Заключение

Используя Django Forms и CSS, вы можете значительно улучшить пользовательский опыт. Применяйте различные методы, начиная с базовой стилизации с помощью attrs, до продвинутой стилизации с Bootstrap и такими библиотеками, как django-crispy-forms. И помните, что при использовании django-crispy-forms следует внимательно настраивать метод инициализации __init__, чтобы файлы журнала оставались чистыми!

В следующей статье мы расскажем о расширенном использовании Django Forms.