HTML-формы

Форма — основной способ получить данные от пользователя: логин, поисковый запрос, комментарий, настройки. Понять устройство HTML-форм важно ещё и потому, что Django работает с ними напрямую — через Form и ModelForm.

Базовая структура формы

<form action="/subscribe/" method="post">
  <!-- поля формы -->
  <button type="submit">Подписаться</button>
</form>

• action — URL, куда будут отправлены данные. Если не указан, отправка идёт на текущий URL.
• method — HTTP-метод: get (данные в URL) или post (данные в теле запроса).

Правило: используйте method="post" для форм, которые меняют данные на сервере. GET — только для поиска и фильтров.

Поле ввода <input>

Самый универсальный элемент формы. Атрибут type определяет поведение:

<!-- Текст -->
<input type="text" name="username" placeholder="Введите логин" />

<!-- Email — браузер проверяет формат -->
<input type="email" name="email" placeholder="you@example.com" />

<!-- Пароль — символы скрыты -->
<input type="password" name="password" />

<!-- Число -->
<input type="number" name="age" min="18" max="120" />

<!-- Чекбокс -->
<input type="checkbox" name="agree" value="yes" />

<!-- Радиокнопка — одна из группы -->
<input type="radio" name="theme" value="dark" />
<input type="radio" name="theme" value="light" />

<!-- Скрытое поле -->
<input type="hidden" name="csrf_token" value="abc123" />

<!-- Кнопка отправки -->
<input type="submit" value="Отправить" />

Популярные типы <input>:

Метка <label>

Связывает текстовое описание с полем. Нажатие на метку активирует поле:

<!-- Явная связь через атрибут for / id -->
<label for="username">Логин:</label>
<input type="text" id="username" name="username" />

<!-- Неявная связь — input внутри label -->
<label>
  Логин:
  <input type="text" name="username" />
</label>

Всегда используйте <label>. Это критично для доступности: экранные читалки произносят метку, когда поле получает фокус.

Многострочный текст <textarea>

<label for="content">Текст комментария:</label>
<textarea
  id="content"
  name="content"
  rows="5"
  cols="40"
  placeholder="Напишите комментарий..."
></textarea>

rows и cols задают начальный размер. CSS-свойство resize управляет возможностью изменять размер вручную.

Выпадающий список <select>

<label for="category">Категория:</label>
<select id="category" name="category">
  <option value="">-- Выберите --</option>
  <option value="python">Python</option>
  <option value="devops">DevOps</option>
  <option value="frontend" selected>Frontend</option>
</select>

Атрибут selected помечает вариант по умолчанию. Атрибут multiple разрешает выбрать несколько вариантов.

Кнопка <button>

<!-- Отправка формы (поведение по умолчанию) -->
<button type="submit">Опубликовать</button>

<!-- Сброс значений формы -->
<button type="reset">Очистить</button>

<!-- Обычная кнопка (без отправки) -->
<button type="button" onclick="preview()">Предпросмотр</button>

<button> гибче <input type="submit">: внутрь можно вложить HTML — иконку, изображение.

Полная форма: страница «Связаться»

<form action="/contact/" method="post" novalidate>
  <!-- Django CSRF-токен вставляется шаблонным тегом {% csrf_token %} -->

  <div class="form-group">
    <label for="name">Имя:</label>
    <input
      type="text"
      id="name"
      name="name"
      required
      minlength="2"
      placeholder="Ваше имя"
    />
  </div>

  <div class="form-group">
    <label for="email">Email:</label>
    <input
      type="email"
      id="email"
      name="email"
      required
      placeholder="you@example.com"
    />
  </div>

  <div class="form-group">
    <label for="subject">Тема:</label>
    <select id="subject" name="subject" required>
      <option value="">-- Выберите тему --</option>
      <option value="feedback">Обратная связь</option>
      <option value="collab">Сотрудничество</option>
      <option value="bug">Нашёл ошибку</option>
    </select>
  </div>

  <div class="form-group">
    <label for="message">Сообщение:</label>
    <textarea
      id="message"
      name="message"
      rows="6"
      required
      placeholder="Ваше сообщение..."
    ></textarea>
  </div>

  <div class="form-group">
    <label>
      <input type="checkbox" name="newsletter" value="yes" />
      Подписаться на рассылку
    </label>
  </div>

  <button type="submit">Отправить</button>
</form>

Связь с Django

В Django-представлении форма обрабатывается так:

# views.py
def contact(request):
    if request.method == "POST":
        name = request.POST.get("name")
        email = request.POST.get("email")
        # ... обработка данных
    return render(request, "contact.html")

Но предпочтительнее использовать django.forms.Form — он автоматически валидирует данные и формирует HTML. Подробнее — в разделе о Django-формах.