Веб -форма , веб-форма или HTML-форма на веб-странице позволяет пользователю вводить данные, которые отправляются на сервер для обработки. Формы могут напоминать бумажные формы или формы базы данных , поскольку веб-пользователи заполняют формы с помощью флажков , переключателей или текстовых полей . Например, формы можно использовать для ввода данных о доставке или кредитной карте для заказа продукта или для получения результатов поиска из поисковой системы .
Формы заключены в элемент HTML <form> . Этот элемент HTML определяет конечную точку связи, в которую должны быть отправлены данные, введенные в форму, и метод отправки данных, GETили POST.
Формы могут состоять из стандартных элементов графического пользовательского интерфейса :
<text>— простое текстовое поле , позволяющее ввести одну строку текста.<email>- тип <text>, требующий частично подтвержденного адреса электронной почты<number>- тип <text>, требующий числа<password>— аналогично <text>, используется в целях безопасности, при этом вводимые символы невидимы или заменяются такими символами, как *<radio>— радиокнопка<file>— элемент управления выбором файла для загрузки файла<reset>— кнопка сброса , которая при активации сообщает браузеру о необходимости восстановить значения текущей формы до их первоначальных значений.<submit>— кнопка , которая сообщает браузеру о необходимости выполнить действие с формой (обычно отправить ее на сервер)<textarea>— очень похоже на <text>поле ввода, за исключением того, что <textarea>позволяет отображать и вводить несколько строк данных<select>— раскрывающийся список , отображающий список элементов, из которых пользователь может выбратьНа образце изображения справа показано большинство этих элементов:
Эти базовые элементы обеспечивают наиболее распространенные элементы графического пользовательского интерфейса (GUI), но не все. Например, нет эквивалентов для представления дерева или представления сетки .
Однако вид сетки можно имитировать, используя стандартную HTML- таблицу , в которой каждая ячейка содержит элемент ввода текста. Вид дерева также можно имитировать с помощью вложенных таблиц или, что более семантически уместно, вложенных списков . В обоих случаях серверный процесс отвечает за обработку информации, в то время как JavaScript обрабатывает взаимодействие с пользователем. Реализации этих элементов интерфейса доступны через библиотеки JavaScript, такие как jQuery .
HTML 4 представил <label>тег, который предназначен для представления заголовка в пользовательском интерфейсе и может быть связан с определенным элементом управления формы путем указания атрибута id элемента управления в forатрибуте тега label. [1] Это позволяет меткам оставаться со своими элементами при изменении размера окна и обеспечивает большую функциональность, похожую на настольную (например, щелчок на переключателе или метке флажка активирует связанный элемент ввода).
HTML 5 вводит ряд тегов ввода, которые могут быть представлены другими элементами интерфейса. Некоторые из них основаны на полях ввода текста и предназначены для ввода и проверки определенных общих данных. К ним относятся <email>ввод адресов электронной почты, <tel>телефонных номеров, <number>числовых значений. Существуют дополнительные атрибуты для указания обязательных полей, полей, которые должны иметь фокус клавиатуры при загрузке веб-страницы, содержащей форму, и текста-заполнителя, который отображается в поле, но не является вводом пользователя (например, текст «Поиск», отображаемый во многих полях ввода поиска до ввода поискового термина). Эти задачи раньше обрабатывались с помощью JavaScript , но стали настолько распространенными, что их поддержка была добавлена в стандарт. <date>Тип ввода отображает календарь, из которого пользователь может выбрать дату или диапазон дат. [2] [3] И colorтип ввода может быть представлен как текст ввода, просто проверяющий, является ли введенное значение правильным шестнадцатеричным представлением цвета в соответствии со спецификацией, [4] или виджетом выбора цвета (последнее является решением, используемым в большинстве браузеров, которые поддерживают этот атрибут).
При отправке данных, введенных в HTML-формы, имена и значения в элементах формы кодируются и отправляются на сервер в сообщении HTTP- запроса с использованием GET или POST . Исторически также использовался транспорт электронной почты . [5] Тип MIME по умолчанию (тип интернет-носителя) , application/x-www-form-urlencoded , основан на очень ранней версии общих правил процентного кодирования URI с рядом изменений, таких как нормализация новой строки+ и замена пробелов на " " вместо " %20". Другая возможная кодировка, тип интернет-носителя multipart/form-data , также доступна и является общей для отправок файлов на основе POST.
Формы обычно объединяются с программами, написанными на различных языках программирования , чтобы позволить разработчикам создавать динамические веб-сайты . Наиболее популярные языки включают как клиентские, так и/или серверные языки.
Хотя на сервере для обработки данных формы можно использовать любой язык программирования, наиболее часто используемыми языками являются скриптовые языки , которые, как правило, обладают более мощными функциями обработки строк , чем такие языки программирования, как C, а также имеют автоматическое управление памятью, что помогает предотвратить атаки переполнения буфера .
Фактическим клиентским языком сценариев для веб-сайтов является JavaScript . Использование JavaScript в объектной модели документа (DOM) приводит к методу динамического HTML , который позволяет динамически создавать и изменять веб-страницу в браузере.
Хотя клиентские языки, используемые в сочетании с формами, ограничены, они часто могут служить для предварительной проверки данных формы и/или для подготовки данных формы к отправке в серверную программу. Однако это использование заменяется новыми типами полей и атрибутами HTML5 .inputrequired
Серверный код может выполнять широкий спектр задач по созданию динамических веб-сайтов, которые клиентский код не может выполнить по техническим причинам или причинам безопасности — от аутентификации входа в систему до извлечения и хранения данных в базе данных , проверки орфографии и отправки электронной почты . Значительным преимуществом серверного выполнения по сравнению с клиентским является концентрация функциональности на сервере, а не опора на различные веб-браузеры для реализации различных функций согласованными, стандартизированными способами. Кроме того, обработка форм на сервере часто приводит к повышению безопасности, если серверное выполнение разработано так, чтобы не доверять данным, предоставленным клиентом, и включает такие методы, как очистка HTML . Одним из недостатков серверного кода является масштабируемость — серверная обработка для всех пользователей происходит на сервере, в то время как клиентская обработка происходит на отдельных клиентских компьютерах.
Некоторые из интерпретируемых языков, обычно используемых для проектирования интерактивных форм в веб-разработке, — это PHP , Python , Ruby , Perl , JSP , Adobe ColdFusion , а некоторые из компилируемых языков, обычно используемых, — это Java и C# с ASP.NET .
PHP — один из самых распространенных языков, используемых для серверного «программирования», и один из немногих языков, созданных специально для веб-программирования . [6] [7]
Для использования PHP с HTML-формой URL-адрес PHP-скрипта указывается в actionатрибуте тега формы. Затем целевой PHP-файл получает доступ к данным, переданным формой, через PHP $_POSTили $_GETпеременные, в зависимости от значения атрибута method, используемого в форме. Вот базовый PHP-скрипт обработчика форм, который будет отображать содержимоеимяполе ввода на странице:
форма.html
<!DOCTYPE html> < html lang = "en" > < head > < title > Форма </ title > </ head > < body > < form action = "form_handler.php" > < p >< label > Имя: < input name = "first_name" /></ label ></ p > < p >< button type = "submit" > Отправить </ button ></ p > </ form > </ body > </ html >form_handler.php
<!DOCTYPE html> <?php // запрос значения внешней переменной "first_name" и его фильтрация. $firstName = filter_input ( INPUT_GET , "first_name" , FILTER_SANITIZE_STRING ); ?> < html lang = "en" > < head > < title > Вывод </ title > </ head > < body > < p > <?php echo "Привет, { $firstName } !" ; /* печать значения */ ?> </ p > </ body > </ html >В примере кода выше используется функция PHP для очистки ввода пользователя перед его вставкой на страницу. Простой вывод (эхо) ввода пользователя в браузер без его предварительной проверки — это то, чего следует избегать в процессорах безопасных форм: если пользователь ввел код JavaScript вfilter_input()<script>alert(1)</script>имяполе, браузер выполнит скрипт наform_handler.phpстраница, как будто она была закодирована разработчиком; таким образом мог быть выполнен вредоносный код. был представлен в PHP 5.2. Пользователи более ранних версий PHP могли использовать функцию или регулярные выражения для очистки пользовательского ввода перед тем, как что-либо с ним делать.filter_input()htmlspecialchars()
Perl — еще один язык, часто используемый для веб-разработки . Скрипты Perl традиционно используются в качестве приложений Common Gateway Interface (CGI). Фактически, Perl — настолько распространенный способ написания CGI, что их часто путают. CGI могут быть написаны на других языках, нежели Perl (совместимость с несколькими языками — цель разработки протокола CGI), и существуют другие способы заставить скрипты Perl взаимодействовать с веб-сервером, помимо использования CGI (например, FastCGI , Plack или mod_perl от Apache ).
Perl CGI когда-то был очень распространенным способом написания веб-приложений . Однако многие веб-хосты сегодня фактически поддерживают только PHP, и разработчики веб-приложений часто ищут совместимость с ними.
Современный Perl 5 CGI, использующий модуль CGI с формой, аналогичной приведенной выше, может выглядеть следующим образом:
form_handler.pl
#!/usr/bin/env perl использовать strict ; использовать CGI qw(:standard) ; my $name = param ( "first_name" ); print header ; print html ( body ( p ( "Привет, $name!" ), ), ); Среди самых простых и наиболее часто используемых типов серверных скриптов есть тот, который просто отправляет по электронной почте содержимое отправленной формы. Однако этот тип скрипта часто используется спамерами , и многие из самых популярных используемых скриптов form-to-email уязвимы для перехвата с целью отправки спам-писем. Одним из самых популярных скриптов этого типа был "FormMail.pl", созданный Matt's Script Archive . Сегодня этот скрипт больше не используется широко в новых разработках из-за отсутствия обновлений, проблем безопасности и сложности настройки.
Некоторые компании предлагают формы как размещенную услугу . Обычно эти компании предоставляют какой-либо визуальный редактор, инструменты отчетности и инфраструктуру для создания и размещения форм, которые могут быть встроены в веб-страницы. [8] Компании веб-хостинга предоставляют шаблоны своим клиентам в качестве дополнительной услуги. Другие службы хостинга форм предлагают бесплатные контактные формы, которые пользователь может установить на своем собственном веб-сайте, вставив код сервиса в HTML-код сайта.
HTML-формы впервые были реализованы в браузере Viola . [9]