Створення простої форми

Сьогодні ми напишемо просту форму, яка дозволить користувачу ввести контактну інформацію: ім'я, електронну пошту та повідомлення. Ми розберемо, як створити клас форми, визначати її поля та використовувати вбудовані класи 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. Але, як кажуть, все складне починається з простого. Попереду нас чекає ще багато цікавого!