Глава 7, раздел 13 : DjangoBook v2.0

Оглавление

Настройка дизайна формы
Пред.	Глава 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 и будут отображены ошибки в виде ненумерованного списка.

Пред.	Уровень выше	След.
Определение меток	Начало	Что дальше?

Увидели ошибку?

Выделите её мышкой и нажмите

Ctrl-Enter

Обработано:

1049 49 130 71

Версия книги

1.0 2.0

Версия 2.0 в процессе перевода!

Мой луч

Многообразие света

Полезное

Актуальные вакансии, Python работа для python-разработчиков.

RSS

Последние новости

Скачать в формате

CHM от 2 сентября

Заказать PDF файл можно через почту, чат, джаббер. Всего 2WMZ. Содержимое точно соответствует содержимому сайта.
Чем чаще заказываете — тем больше перевожу.

Русская группа

на Google

на поддержку перевода

Ускорить процесс перевода!

R130494980980
Z425285133788
E112528079659
U327380922061

Книга помогла реализовать:

	Проект «Мой луч»
	АРМ УФМС.

Мой вебсайт стоит666 337,31 руб