JavaRush /Курсы /Модуль 3: Django /Создание простой формы

Создание простой формы

Модуль 3: Django
12 уровень , 1 лекция
Открыта

Сегодня мы напишем простую форму, которая позволит пользователю ввести контактную информацию: имя, электронную почту и сообщение. Мы разберём, как создать класс формы, определять её поля и использовать встроенные классы CharField, EmailField и TextField. Также мы обсудим основные атрибуты полей формы, такие как required, max_length и initial.

Ну что, готовы? Давайте начинать!

Основы: что такое форма в Django

Прежде чем мы начнем писать код, давайте еще раз уточним, что такое форма в Django. Каждая форма в Django — это Python-класс, который представляет HTML-форму. Этот класс:

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

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

Создание класса формы

В Django для создания формы мы используем модуль forms из библиотеки django. Первое, что нужно сделать, — это создать класс формы. Воспользуемся встроенным классом Form.

Вот минимальный пример:

# forms.py
from django import forms

class ContactForm(forms.Form):
    name = forms.CharField(max_length=100, required=True, label="Имя")
    email = forms.EmailField(required=True, label="Электронная почта")
    message = forms.CharField(widget=forms.Textarea, label="Сообщение", required=True)

Разберём этот код

  1. Импортируем forms: это главный модуль Django для работы с формами. Без него, увы, никак.
  2. Создаём класс формы: название класса ContactForm говорит само за себя. Он отвечает за контактную форму.
  3. Добавляем поля:
    • name: поле для имени. Используем CharField с максимальной длиной 100 символов. Устанавливаем, что оно обязательно required=True.
    • email: поле для ввода email-адреса. Здесь идеально подходит EmailField, который автоматически проверяет корректность email.
    • message: это текстовое поле. Для него мы используем CharField, но указали виджет Textarea, чтобы получить многострочную текстовую область.

Пока всё просто, правда? Давайте теперь посмотрим на базовые атрибуты полей.

Основные атрибуты полей формы

Каждое поле формы обладает рядом атрибутов, которые мы можем использовать для настройки.

Базовые атрибуты

  • required: если True, поле обязательно для заполнения. По умолчанию установлено в True.
  • max_length: максимальное количество символов, которое можно ввести в поле. Применяется только к текстовым полям.
  • initial: устанавливает начальное значение для поля.
  • label: определяет текст, отображаемый рядом с полем как метка.
  • widget: позволяет задать особый HTML-элемент, отображающий поле (например, Textarea, PasswordInput и др.).

Пример с использованием атрибутов

class AdvancedContactForm(forms.Form):
    name = forms.CharField(
        max_length=50,
        required=True,
        initial="Ваше имя",
        label="Имя пользователя",
        widget=forms.TextInput(attrs={"class": "form-control"})
    )
    email = forms.EmailField(
        required=True,
        label="Ваш email",
        widget=forms.EmailInput(attrs={"placeholder": "Введите ваш email"})
    )
    message = forms.CharField(
        widget=forms.Textarea(attrs={"rows": 5, "cols": 30}),
        required=False,
        label="Сообщение (необязательно)"
    )

В этом примере вы видите, как можно подключить CSS-классы через параметр widget.attrs.

Пример простой формы в приложении

Давайте добавим форму в наше приложение и выведем её на странице.

Шаг 1: создаём представление

Создадим представление, которое будет отображать нашу форму и обрабатывать её данные.

# views.py
from django.shortcuts import render
from .forms import ContactForm

def contact_view(request):
    form = ContactForm()
    if request.method == "POST":
        form = ContactForm(request.POST)
        if form.is_valid():
            name = form.cleaned_data['name']
            email = form.cleaned_data['email']
            message = form.cleaned_data['message']
            # Логика сохранения данных или отправки email
            print(f"Имя: {name}, Email: {email}, Сообщение: {message}")
            return render(request, 'thank_you.html')  # Страница "Спасибо"
    return render(request, 'contact.html', {'form': form})

Шаг 2: создаём URL маршрут

Не забудьте установить маршрут в urls.py:

# urls.py
from django.urls import path
from .views import contact_view

urlpatterns = [
    path('contact/', contact_view, name='contact'),
]

Шаг 3: создаём HTML-шаблон

Теперь нам нужно отобразить форму в HTML. Вот пример кода для contact.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Контактная форма</title>
</head>
<body>
    <h1>Свяжитесь с нами</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">Отправить</button>
    </form>
</body>
</html>

Тег {{ form.as_p }} автоматически отображает все поля формы в виде HTML <p> элементов.

Обработка данных из формы

Когда пользователь нажимает на кнопку "Отправить", данные из формы отправляются на сервер. Представление извлекает эти данные из request.POST, проверяет их на корректность и обрабатывает.

Ключевые шаги:

  1. Создание объекта формы с данными: мы передаём request.POST в конструктор формы.
  2. Валидация формы: метод is_valid() проверяет данные формы.
  3. Извлечение данных: после валидации данные можно получить через form.cleaned_data.

Если данные формы валидны, они будут доступны в виде словаря cleaned_data. Например:

if form.is_valid():
    name = form.cleaned_data['name']
    email = form.cleaned_data['email']
    message = form.cleaned_data['message']
    print(f"Имя: {name}, Email: {email}, Сообщение: {message}")

Подведение итогов

Сегодня мы создали нашу первую простую форму, поняли, как она представляется в Django, и подключили её к представлению и шаблону. Теперь вы умеете:

  • Определять форму через класс forms.Form.
  • Настраивать поля формы через атрибуты.
  • Обрабатывать данные, отправленные пользователем.

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

1
Задача
Модуль 3: Django, 12 уровень, 1 лекция
Недоступна
Создание простой формы с текстовым полем
Создание простой формы с текстовым полем
1
Задача
Модуль 3: Django, 12 уровень, 1 лекция
Недоступна
Обработка и проверка формы
Обработка и проверка формы
Комментарии
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ