Формы в Django

Настройка формы и ее полей

В предыдущем разделе мы познакомились с различными типами полей для ввода данных и основными их свойствами- такими как, например, метка поля (label), подсказки (help_text) и т. п. В этом разделе мы познакомимся с тем, как можно менять некоторые другие свойства полей и их положение на веб-странице.

Изменение внешнего вида поля с помощью параметра widget

Параметр widget позволяет задать объект, который будет использоваться для генерации НТМL-разметки и тем самым определять внешний вид поля на веб-странице. Если пользователь явно не указывает виджет, то Django применит тот виджет, который задан по умолчанию. Однако пользователь может задать для поля свой виджет, заменив им тот, который используется по умолчанию.

По умолчанию поле CharField использует виджет forms.widgets.TextInput, который создает однострочное текстовое поле. Однако если нам надо создать многострочное текстовое поле, то необходимо воспользоваться виджетом forms.Textarea

Рассмотрим это на примере, изменим код в forms.py:

from django import forms


class UserForm(forms.Form):
    name = forms.CharField(label='Имя')
    age = forms.IntegerField(label='Ваш возраст?', widget=forms.Textarea)

После этого форма будет выглядеть следующим образом:

Задание начальных значений полей с помощью свойства initial

Когда в программе создается новое поле, то оно, как правило, имеет пустое значение.
Однако его можно сделать не пустым, воспользовавшись свойством initial:

from django import forms


class UserForm(forms.Form):
    name = forms.CharField(label='Имя', initial='undefined')
    age = forms.IntegerField(label='Ваш возраст?', widget=forms.Textarea, initial=18)

После этих изменений при запуске нашего приложения созданные поля не будут пустыми.

Задание порядка следования полей на форме

По умолчанию все поля на форме идут в той последовательности, в которой они описаны в модуле инициализации формы. Однако в процессе работы над проектом разработчик может многократно добавлять или удалять поля.

Чтобы иметь возможность гибко менять порядок следования полей на форме, можно использовать свойство формы field_order. Это свойство позволяет переопределить порядок следования полей как в классе формы, так и при определении объекта формы в представлении.

В классе формы это можно сделать, например, следующим образом:

from django import forms


class UserForm(forms.Form):
    name = forms.CharField(label='Имя', initial='undefined')
    age = forms.IntegerField(label='Ваш возраст?', widget=forms.Textarea, initial=18)
    field_order = ['age', 'name']

Здесь мы указали, что поле age будет отображаться на форме раньше, чем поле name, несмотря на то что поле name было создано первым. При запуске приложения поля будут идти в той последовательности, как указано в свойстве field_order:

Задание подсказок к полям формы

Для того чтобы предоставить пользователю дополнительную информацию о том, какие данные следует вводить в то или иное поле, можно использовать свойство поля help_text:

from django import forms


class UserForm(forms.Form):
    name = forms.CharField(label='Имя', initial='undefined', help_text='Введите свое имя')
    age = forms.IntegerField(label='Ваш возраст?', initial=18, help_text='Введите свой возраст')

После этих изменений при запуске нашего приложения рядом с соответствующими полями появятся подсказки:

Настройки вида формы

Общее отображение полей на форме можно настроить с помощью специальных методов:

as_table(): отображение в виде таблицы
as_ul(): отображение в виде списка
as_p(): каждое поле формы отображается в отдельном параграфе
as_div(): каждое поле формы отображается в отдельном блоке div

Чтобы проверить как это работает, изменим код в нашем шаблоне index.html на следующий:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Учу Django</title>
</head>
<body>
<h2>as_table</h2>
<form method="POST">
    {% csrf_token %}
    <table>
        {{ form.as_table }}
    </table>
    <input type="submit" value="Send">
</form>
<h2>as_ul</h2>
<form method="POST">
    {% csrf_token %}
    <ul>
        {{ form.as_ul }}
    </ul>
    <input type="submit" value="Send">
</form>
<h2>as_p</h2>
<form method="POST">
    {% csrf_token %}
    <div>
        {{ form.as_p }}
    </div>
    <input type="submit" value="Send">
</form>
</body>
</html>

Посмотрим, как работают эти методы на примере. После этих изменений при запуске нашего приложения созданные поля на форме будут представлены в трех видах:

В первом случае поля формы представлены в виде таблицы. При этом идентификаторы полей выровнены по центру, а правая и левая граница каждого поля - между собой.

Во втором случае поля формы представлены в виде списка. При этом слева от идентификатора поля присутствует признак элемента списка (маркер).

В третьем случае поля формы представлены в виде параграфа (абзаца). При этом идентификаторы полей и сами поля выровнены по левому краю.