Описание HTML-формы
HTML-форма(Формы HTML) – это раздел веб-страницы, предназначенный для ввода и отправки данных пользователем. Она представляет собой контейнер, в котором размещаются различные элементы управления, такие как:
- Поля ввода текста: для ввода имени, адреса электронной почты, пароля и т.д.
- Текстовые области: для ввода более длинных текстов, например, комментариев или вопросов.
- Флажки: для выбора одного или нескольких вариантов из списка.
- Радиокнопки: для выбора одного варианта из группы.
- Выпадающие списки: для выбора одного варианта из списка.
- Кнопки: для отправки формы, сброса значений или выполнения других действий.
Как работает HTML-форма
- Пользователь заполняет поля формы, вводя необходимые данные.
- При нажатии кнопки “Отправить” данные формы отправляются на сервер.
- Сервер обрабатывает данные и выполняет необходимые действия, например, сохраняет информацию в базе данных, отправляет письмо или перенаправляет пользователя на другую страницу.
Теги HTML-форм
- <form> Самый главный тег. Используется для создания HTML-формы, в которую пользователь вводит данные.
- <input> Многоцелевой тег, наиболее часто используемый для создания полей ввода. Может иметь различные типы для задания видов вводимой информации:
type="text": простое текстовое полеtype="password": поле ввода пароля (с маскировкой)type="email": поле для электронного адресаtype="checkbox": флажок (опция, которую можно включить или отключить)type="radio": одна из группы радиокнопок (где возможен выбор только одного варианта)- …и многие другие
- <textarea> Используется для создания области ввода текста с возможностью переноса строк, обычно для комментариев или отзывов.
- <button> Создает кликабельную кнопку в форме. Чаще всего используется для отправки формы (
type="submit") или для других действий. - <select> Создает выпадающий список. Используется вместе с тегом
<option>. - <option> Определяет один из вариантов в списке
<select>. - <optgroup> Группирует связанные опции в выпадающем списке
<select>. - <fieldset> Группирует связанные поля формы вместе, часто выделяя их рамкой.
- <label> Связывает текстовую метку с определенным элементом формы (полем ввода, кнопкой и т.д.). Улучшает доступность формы.
- <output> Отображает результат вычислений (обычно используется со скриптами).
Пример:
<form action="" method="post">
<h2>Форма обратной связи</h2>
<p>
<label for="name">Ваше имя:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">Ваш email:</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="comment">Ваш комментарий:</label>
<textarea id="comment" name="comment" rows="5" required></textarea>
</p>
<p>
<button type="submit">Отправить</button>
</p>
</form>
GET или POST?
HTTP-методы GET и POST являются основными для работы с формами.
Форма входа в Django возвращается с использованием метода POST. В этом случае браузер упаковывает данные формы, кодирует их для передачи, отправляет на сервер и получает ответ.
Метод GET, напротив, включает отправленные данные в строку и использует ее для формирования URL-адреса. Таким образом, URL содержит адрес, куда должны быть отправлены данные, а также ключи и значения данных. Это можно увидеть, например, при поиске в документации Django, когда URL будет выглядеть как: https://docs.djangoproject.com/search/?q=forms&release=1.
Методы GET и POST обычно используются для разных целей:
- Любые запросы, которые могут изменить состояние системы (например, изменения в базе данных), должны использовать
POST.GETследует использовать только для запросов, которые не влияют на состояние системы. GETне подходит для формы пароля, потому что пароль будет отображаться в URL, а значит, и в истории браузера, и в логах сервера в открытом виде. Он также не подходит для больших объемов данных или бинарных данных, таких как изображения.- Использование
GETдля форм администратора является риском безопасности, так как злоумышленник может легко имитировать запрос формы, чтобы получить доступ к чувствительным частям системы.POSTв сочетании с другими защитами, такими как защита CSRF в Django, предоставляет больший контроль над доступом. - С другой стороны,
GETподходит для таких вещей, как веб-форма поиска, потому что URL-адреса, представляющие запросGET, можно легко добавлять в закладки, делиться ими или повторно отправлять.
CSRF токен
CSRF (Cross-Site Request Forgery) — это тип атаки на веб-приложения, при которой злоумышленник вынуждает пользователя выполнить действие на веб-сайте, на котором этот пользователь авторизован.
Процесс атаки обычно выглядит следующим образом:
- Злоумышленник создает поддельный сайт или внедряет зловредный код на легитимный сайт.
- Пользователь, уже авторизованный на целевом веб-сайте, посещает этот поддельный или компрометированный сайт.
- На фоне пользователь может не заметить, что в его браузере отправляются запросы к целевому веб-сайту (через скрытые формы, JavaScript или другие методы), которые выполняют нежелательные операции, такие как изменение пароля, отправка сообщения, выполнение финансовых операций и т. д.
Django предоставляет встроенную защиту от CSRF с помощью middleware и шаблонных тегов.
Как это работает:
- Генерируется случайное секретное значение CSRF-cookie, которое отправляется в ответе сервера.
- Во все исходящие POST-формы добавляется скрытое поле “csrfmiddlewaretoken” со специальным значением.
- При всех POST, PUT, DELETE запросах проверяется наличие и правильность CSRF-токена.
- Также проверяется заголовок Origin или Referer для защиты от межсубдоменных атак.
Для того, чтобы использовать эту функциональность “из коробки”, добаляем тег {% csrf_token %} в наш html-шаблон, например:
<form action="/your-url/" method="post">
{% csrf_token %}
<!-- Здесь остальные поля вашей формы -->
<input type="submit" value="Отправить">
</form>Этот код создает форму с методом POST и добавляет скрытое поле с CSRF токеном. При отправке формы на сервер, CSRF токен будет автоматически включен в запрос, и Django сравнит его с CSRF токеном, хранящимся в куки. Если они совпадают, запрос будет считаться доверенным, и Django примет его.
Hint
Важно помнить, что
{% csrf_token %}должен быть включен внутри тега<form>, иначе Django выдаст ошибку при попытке рендеринга шаблона. Это необходимо для обеспечения полноценной защиты от CSRF-атак. Также если не указать тег{% csrf_token %}при использовании метода POST в форме, будет получена ошибка - 403.
〰〰〰 𓆝 𓆟 𓆞 𓆝 𓆟 𓆝 𓆟 𓆞 〰〰〰