Глава 7, раздел 13: DjangoBook по-русски

Table of contents

Настройка дизайна формы
Пред.	Глава 7. Формы	След.

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

Наш шаблон contact_form.html использует {{ form.as_table }} для отображения формы, но мы можем отображать её другими способами для получения более точного контроля над процессом отображения.

Наиболее быстрым способом настройки вида формы будет использование CSS. Списки ошибок могут отображаться с визуальным выделением, автосгенерированные списки используют <ul class="errorlist">, это можно использовать:

<style type="text/css">
    ul.errorlist {
        margin: 0;
        padding: 0;
    }
    .errorlist li {
        background-color: red;
        color: white;
        display: block;
        font-size: 10px;
        margin: 0 0 3px;
        padding: 4px 5px;
    }
</style>

Чаще всего вы будете изменять стандартный вид формы. Тег {{ form.as_table }} и остальные являются лишь полезными сокращениями, но процессом отображения формы можно управлять, в основном на уровне шаблона.

Каждый виджет поля (<input type="text">, <select>, <textarea> и так далее) может быть индивидуально отображён с помощью указания {{ form.fieldname }} в шаблоне, а любые ошибки, ассоциированные с конкретным полем, можно получить через {{ form.fieldname.errors }}. Помня это, мы можем создать собственный шаблон для нашей формы с помощью следующего кода:

<html>
<head>
    <title>Contact us</title>
</head>
<body>
    <h1>Contact us</h1>

    {% if form.errors %}
        <p style="color: red;">
            Please correct the error{{ form.errors|pluralize }} below.
        </p>
    {% endif %}

    <form action="" method="post">
        <div class="field">
            {{ form.subject.errors }}
            <label for="id_subject">Subject:</label>
            {{ form.subject }}
        </div>
        <div class="field">
            {{ form.email.errors }}
            <label for="id_email">Your e-mail address:</label>
            {{ form.email }}
        </div>
        <div class="field">
            {{ form.message.errors }}
            <label for="id_message">Message:</label>
            {{ form.message }}
        </div>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Тег {{ form.message.errors }} отобразит <ul class="errorlist">, при наличии ошибок и пустую строку, при их отсутствии (или если к форме не привязаны данные). Мы можем также рассматривать form.message.errors в качестве булевого значения или в качестве итератора. Например:

<div class="field{% if form.message.errors %} errors{% endif %}">
    {% if form.message.errors %}
        <ul>
        {% for error in form.message.errors %}
            <li><strong>{{ error }}</strong></li>
        {% endfor %}
        </ul>
    {% endif %}
    <label for="id_message">Message:</label>
    {{ form.message }}
</div>

В случае ошибок при проверке данных, к тегу <div> будет добавлен класс errors и будут отображены ошибки в виде ненумерованного списка.