Веб -форма , веб-форма или 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. [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 > Form </ 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> < html lang = "en" > < head > < title > Вывод </ title > </ head > < body > <?php // Будет напечатано все, что пользователь ввел на страницу form.html. $firstName = filter_input ( INPUT_GET , «имя» , FILTER_SANITIZE_STRING ); echo "Привет, ${ firstName } !" ; ?> </ body > </ html >В приведенном выше примере кода используется функция PHP для очистки ввода пользователя перед его вставкой на страницу. Простая печать (эхо) пользовательского ввода в браузере без предварительной проверки — это то, чего следует избегать в процессорах защищенных форм: если пользователь ввел код JavaScript вfilter_input()<script>alert(1)</script>имяполе, браузер выполнит скрипт в полеform_handler.phpстраница, как если бы она была закодирована разработчиком; вредоносный код может быть выполнен таким образом. был представлен в PHP 5.2. Пользователи более ранних версий PHP могли использовать эту функцию или регулярные выражения для очистки пользовательского ввода, прежде чем что-либо с ним делать.filter_input()htmlspecialchars()
Perl — еще один язык, часто используемый для веб-разработки . Сценарии Perl традиционно используются в качестве приложений общего интерфейса шлюза (CGI). На самом деле Perl — настолько распространенный способ написания CGI, что их часто путают. CGI могут быть написаны на других языках, кроме Perl (совместимость с несколькими языками является целью разработки протокола CGI), и существуют другие способы обеспечения взаимодействия сценариев Perl с веб- сервером , кроме использования CGI (например, FastCGI , Plack или Apache ). мод_перл ).
Perl CGI когда-то был очень распространенным способом написания веб-приложений . Однако сегодня многие веб-хосты фактически поддерживают только PHP, и разработчики веб-приложений часто стремятся обеспечить совместимость с ними.
Современный CGI Perl 5, использующий модуль CGI с формой, аналогичной приведенной выше, может выглядеть так:
form_handler.pl
#!/usr/bin/env perl use strict ; используйте CGI qw(:standard) ; my $name = param ( "имя" ); распечатать заголовок ; print html ( body ( p ( «Привет, $name!» ), ), ); Среди самых простых и наиболее часто используемых типов серверных сценариев есть тот, который просто отправляет по электронной почте содержимое отправленной формы. Однако этот тип сценариев часто используется спамерами , и многие из наиболее популярных используемых сценариев преобразования формы в электронную почту уязвимы для взлома с целью рассылки спам-сообщений. Одним из самых популярных скриптов этого типа был «FormMail.pl», созданный Matt's Script Archive . Сегодня этот сценарий больше не широко используется в новых разработках из-за отсутствия обновлений, проблем с безопасностью и сложности настройки.
Некоторые компании предлагают формы в качестве размещенной услуги . Обычно эти компании предоставляют какой-то визуальный редактор, инструменты отчетности и инфраструктуру для создания и размещения форм, которые можно встроить в веб-страницы. [8] Хостинговые компании предоставляют шаблоны своим клиентам в качестве дополнительной услуги. Другие службы хостинга форм предлагают бесплатные контактные формы, которые пользователь может установить на свой веб-сайт, вставив код службы в HTML-код сайта.
HTML-формы были впервые реализованы в браузере Viola . [9]