Работа с формами
Одно из главнейших достоинств PHP — то, как он работает с формами HTML. Здесь основным является то, что каждый элемент формы автоматически становится доступным вашим программам на PHP. Для подробной информации об использовании форм в PHP читайте раздел Переменные из внешних источников. Вот пример формы HTML:
Пример #1 Простейшая форма HTML
В этой форме нет ничего особенного. Это обычная форма HTML без каких-либо специальных тегов. Когда пользователь заполнит форму и нажмёт кнопку отправки, будет вызвана страница action.php . В этом файле может быть что-то вроде:
Пример #2 Выводим данные формы
Здравствуйте, .
Вам лет.
Пример вывода данной программы:
Здравствуйте, Сергей. Вам 30 лет.
Если не принимать во внимание куски кода с htmlspecialchars() и (int) , принцип работы данного кода должен быть прост и понятен. htmlspecialchars() обеспечивает правильную кодировку «особых» HTML-символов так, чтобы вредоносный HTML или Javascript не был вставлен на вашу страницу. Поле age, о котором нам известно, что оно должно быть число, мы можем просто преобразовать в int , что автоматически избавит нас от нежелательных символов. PHP также может сделать это автоматически с помощью модуля filter. Переменные $_POST[‘name’] и $_POST[‘age’] автоматически установлены для вас средствами PHP. Ранее мы использовали суперглобальную переменную $_SERVER , здесь же мы точно так же используем суперглобальную переменную $_POST , которая содержит все POST-данные. Заметим, что метод отправки (method) нашей формы — POST. Если бы мы использовали метод GET, то информация нашей формы была бы в суперглобальной переменной $_GET . Кроме этого, можно использовать переменную $_REQUEST , если источник данных не имеет значения. Эта переменная содержит смесь данных GET, POST, COOKIE.
В PHP можно также работать и с XForms, хотя вы найдёте работу с обычными HTML-формами довольно комфортной уже через некоторое время. Несмотря на то, что работа с XForms не для новичков, они могут показаться вам интересными. В разделе возможностей PHP у нас также есть короткое введение в обработку данных из XForms.
User Contributed Notes 3 notes
20 years ago
According to the HTTP specification, you should use the POST method when you’re using the form to change the state of something on the server end. For example, if a page has a form to allow users to add their own comments, like this page here, the form should use POST. If you click «Reload» or «Refresh» on a page that you reached through a POST, it’s almost always an error — you shouldn’t be posting the same comment twice — which is why these pages aren’t bookmarked or cached.
You should use the GET method when your form is, well, getting something off the server and not actually changing anything. For example, the form for a search engine should use GET, since searching a Web site should not be changing anything that the client might care about, and bookmarking or caching the results of a search-engine query is just as useful as bookmarking or caching a static HTML page.
13 years ago
Also, don’t ever use GET method in a form that capture passwords and other things that are meant to be hidden.
Руководство по HTML-формам
Данное руководство представляет собой серию статей, которые помогут вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!
Необходимые условия
Перед началом этого модуля вам следует изучить хотя бы Введение в HTML. На данный момент у вас не должно возникнуть сложностей с пониманием Основных руководств и использованием нашего руководства по Стандартным виджетам форм.
Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.
**Примечание:**Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например JSBin или Thimble.
Основные руководства
Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.
Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.
Какие виджеты форм доступны?
Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.
Валидация и подтверждение данных форм
Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.
Продвинутые руководства
В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функциональности. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье (с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.
В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).
Статья раскрывает особенности обнаружения и т.д. (см. Кросс-браузерное тестирование для более глубокого понимания)
Руководства по стилизации форм
Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.
В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.
Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.
Смотрите также
- Ссылка на элементы HTML-форм
- Ссылка на виды HTML-элемента
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Работа с формами — Python: Разработка на фреймворке Django
Чтобы реализовать создание и обновление сущности в CRUD, нужно научиться правильно работать с формами. Создавать формы самостоятельно утомительно. Сотни строк одинакового кода, обработка ошибок, защита от атак — всё это придется делать постоянно.
Обычно у фреймворков есть встроенная поддержка генерации форм. Она состоит из набора функций, которые автоматизируют рутину. Django не является исключением. Он предоставляет ряд инструментов и библиотек, которые помогут создавать формы для отправки пользователем информации, а затем обрабатывать и отвечать на нее. В этом уроке разберем, как генерировать формы.
Django Forms
Формы Django удобны тем, что можно создать новую форму с нуля или воспользоваться ModelForm , чтобы сохранять содержимое формы в модель.
Django выполняет три отдельные части работы с формами:
- Подготовка данных для рендеринга
- Создание HTML-формы для данных
- Получение и обработка форм и данных от клиента
Для начала работы с формами Django необходимо создать файл forms.py внутри приложения:
Теперь добавим следующий код:
from django import forms # Импортируем формы Django class CommentArticleForm(forms.Form): content = forms.CharField(label='Комментарий') # Текст комментария В этом примере мы определили класс нашей формы с одним полем — content. Данное описание формы при рендеринге даст следующий HTML-вид:
for="id_content">Комментарий: name="content" cols="40" rows="10" required id="id_content"> Код не включает тег или кнопку отправки. В дальнейшем нам нужно самим добавить их в шаблон.
Чтобы форма отображалась, нужно создать представление со следующим содержанием:
from django.shortcuts import render from .forms import CommentArticleForm class CommentArticleView(View): def get(self, request, *args, **kwargs): form = CommentArticleForm() # Создаем экземпляр нашей формы return render(request, 'comment.html', 'form': form>) # Передаем нашу форму в контексте Создадим шаблон с нашей формой:
action="" method="post"> border="1"> > type="submit" value="Сохранить"> В шаблоне для отображения формы достаточно указать только > . Дальнейшую генерацию и отображение формы Django возьмет на себя. Мы также обязательно добавляем в форму. Данная инструкция встраивает скрытое поле со случайным кодом, который проверяется Django и защищает от CSRF-атак .
Обработка Django Forms
Любую информацию о HTTP-запросе и данные формы можно получить из объекта request . В Django для этого достаточно передать в класс формы request.POST для автоматической обработки переданных данных:
class CommentArticleView(View): def post(self, request, *args, **kwargs): form = CommentArticleForm(request.POST) # Получаем данные формы из запроса if form.is_valid(): # Проверяем данные формы на корректность comment = Comment( name = form.cleaned_data['content'], # Получаем очищенные данные из поля content # Заполняем оставшиеся поля ) comment.save() Django ModelForm
Если в приложении есть база данных, то можно предоставить пользователям возможность заполнения некоторых полей самостоятельно. Например, у нас есть модель ArticleComment и мы хотим создать форму, чтобы пользователи смогли оставлять комментарии
from django.db import models class ArticleComment(models.Model): content = models.CharField('content', max_length=100) В этом случае нам пришлось бы заново определять типы полей для формы. Но это затратно по времени. По этой причине в Django есть вспомогательный класс, который позволяет создавать Form-класс из модели Django
# forms.py from django.forms import ModelForm class ArticleCommentForm(ModelForm): class Meta: model = ArticleComment fields = ['content'] Такой класс при генерации будет иметь все перечисленные поля в атрибуте fields указанной модели в атрибуте model .
Обработка Django ModelForm
Обработка Django ModelForm отличается от Django Forms только тем, что в ModelForm у нас уже есть связь с моделью. Поэтому мы можем после проверки формы сразу перейти к сохранению данных:
class ArticleCommentFormView(View): def post(self, request, *args, **kwargs): form = ArticleCommentForm(request.POST) # Получаем данные формы из запроса if form.is_valid(): # Проверяем данных формы на корректность form.save() # Сохраняем форму Если нам нужно дополнительно заполнить или обработать поля формы, то мы можем указать Django, что данные не нужно сразу сохранять:
class ArticleCommentFormView(View): def post(self, request, *args, **kwargs): form = ArticleCommentForm(request.POST) # Получаем данные формы из запроса if form.is_valid(): # Проверяем данные формы на корректность comment = form.save(commit=False) # Получаем заполненную модель # Дополнительно обрабатываем модель comment.content = check_for_spam(form.data['content']) comment.save() Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
Работа с формами
Один из способов взаимодействия с пользователями представляют html-формы. Например, если нам надо получить от пользователя некоторую информацию, мы можем определить на веб-странице формы, которая будет содержать текстовые поля для ввода информации и кнопку для отправки. И после ввода данных мы можем обработать введенную информацию.
Для создания формы используется элемент :
В JavaScript форма представлена объектом HtmlFormElement . И после создания формы мы можем к ней обратиться различными способами.
Получение формы
Первый способ заключается в прямом обращении по имени формы:
const searchForm = document.search;
Второй способ состоит в обращении к коллекции форм документа — коллекция forms и поиске в ней нужной формы:
const searchForm1 = document.forms["search"]; // по имени const searchForm2 = document.forms[0]; // по индексу
Третий способ представляет получение форм стандартными методами для поиска элемента по id, по тегу или по селектору. Например:
const formById = document.getElementById("search"); const formByName = document.getElementsByName("search")[0]; const formBySelector = document.querySelector("form");
Свойства и методы форм
Форма имеет ряд свойств, из которых перечислю основные:
- name : имя формы
- elements : коллекция элементов формы
- length : количество элементов формы
- action : значение атрибута action — адрес отправки формы
- method : значение атрибута method — метод HTTP, применяемый для отправки
Например, получим свойства формы:
METANIT.COM
Среди методов формы надо отметить метод submit() , который отправляет данные формы на сервер, и метод reset() , который очищает поля формы:
const form = document.forms["search"]; form.submit(); form.reset();
Элементы форм
Форма может содержать различные элементы ввода html: input, textarea, button, select и т.д. Для каждого из элементов существует свой тип JavaScript:
Для получения элементов форм можно использовать два способа:
-
Применение стандартных методов getElementById() , getElementsByClassName() , getElementsByTagName() , getElementsByName() , querySelector() и querySelectorAll() для поиска элементов соответственно по id, классу, тегу, имени или селектору. Например, возьмем ранее определенную форму и получим ее поле ввода:
// получаем элемент по const keyField = document.getElementById("key"); console.log(keyField);
const form = document.getElementById("search"); // получение поля по индексу const keyField = form.elements[0]; console.log(keyField); // получение этого же поля, но через имя const keyField2 = form.elements["q"]; console.log(keyField2);
// поле q на форме search const keyField = document.search.q; console.log(keyField);
Свойства элементов форм
Все они имеют ряд общих свойств и методов. Также, как и форма, элементы форм имеют свойство name , с помощью которого можно получить значение атрибута name . Другим важным свойством является свойство value , которое позволяет получить или изменить значение поля:
Свойство type позволяет получить тип поля ввода. Это либо название тега элемента (например, textarea), либо значение атрибута type у элементов input .
const form = document.getElementById("search"); // получение поля формы по имени const keyField = form.elements["key"]; // получение значения поля console.log(keyField.type); // text
Из методов можно выделить методы focus() (устанавливает фокус на элемент) и blur() (убирает фокус с элемента):
const searchForm = document.forms["search"]; const keyField = searchForm.elements["key"]; keyField.focus();