Webform , веб - формы или формы HTML на веб - странице позволяет пользователю вводить данные , которые посылаются на сервер для обработки. Формы могут напоминать бумажные формы или формы базы данных, потому что веб-пользователи заполняют формы с помощью флажков, переключателей или текстовых полей . Например, формы могут использоваться для ввода данных о доставке или кредитной карты для заказа продукта или могут использоваться для получения результатов поиска из поисковой системы .
Описание
Формы заключены в элемент HTML . Этот элемент определяет конечную точку связи, в которую должны быть отправлены данные, введенные в форму, и метод отправки данных,
GET
или POST
.
Элементы
Формы могут состоять из стандартных элементов графического пользовательского интерфейса :
- простое текстовое поле , позволяющее вводить одну строку текста.
- тип
, требующий частично подтвержденного адреса электронной почты
- тип
, требующий числа
- аналогично
, он используется в целях безопасности, в котором введенные символы невидимы или заменяются такими символами, как *)
- переключатель
- элемент управления выбора файла для загрузки файла
- кнопка сброса, которая при активации сообщает браузеру восстановить значения до их начальных значений.
- кнопка, которая сообщает браузеру выполнить действие с формой (как правило, отправить ее на сервер)- очень похоже на
поле ввода, за исключением того, чтопозволяет отображать и вводить несколько строк данных
- раскрывающийся список, в котором отображается список элементов, из которых пользователь может выбрать
Образец изображения справа показывает большинство из этих элементов:
- текстовое поле с запросом вашего имени
- пара переключателей с просьбой выбрать свой пол
- выберите поле , давая вам список цветов глаз , чтобы выбрать из
- пара флажков, которые нужно установить, если они относятся к вам
- текстовая область для описания ваших спортивных способностей
- кнопка отправки, чтобы отправить его на сервер
Эти базовые элементы предоставляют наиболее распространенные элементы графического интерфейса пользователя (GUI), но не все. Например, нет эквивалентов представлению в виде дерева или сетки .
Однако представление сетки можно имитировать, используя стандартную таблицу HTML, в каждой ячейке которой содержится элемент ввода текста. Древовидное представление также можно имитировать с помощью вложенных таблиц или, что более семантически , вложенных списков . В обоих случаях серверный процесс отвечает за обработку информации, а JavaScript обрабатывает взаимодействие с пользователем. Реализации этих элементов интерфейса доступны через библиотеки JavaScript, такие как jQuery .
HTML 4 представил тег, который предназначен для представления заголовка в пользовательском интерфейсе и может быть связан с конкретным
id
элементом управления формой путем указания атрибута элемента управления в for
атрибуте тега метки . [1] Это позволяет ярлыкам оставаться в своих элементах при изменении размера окна и обеспечивать более функциональные возможности, аналогичные настольным (например, щелчок метки переключателя или флажка активирует связанный элемент ввода).
HTML 5 вводит ряд тегов ввода, которые могут быть представлены другими элементами интерфейса. Некоторые из них основаны на полях ввода текста и предназначены для ввода и проверки определенных общих данных. К ним относятся
ввод адресов электронной почты,
номеров телефонов и
числовых значений. Существуют дополнительные атрибуты для указания обязательных полей, поля, которые должны иметь фокус клавиатуры при загрузке веб-страницы, содержащей форму, и текст-заполнитель, который отображается внутри поля, но не вводится пользователем (например, текст «Поиск», отображаемый во многих поля ввода поиска перед вводом поискового запроса). Эти задачи раньше решались с помощью JavaScript , но стали настолько распространенными, что их поддержка была добавлена в стандарт. Тип
ввода отображает календарь, из которого пользователь может выбрать дату или диапазон дат. [2] [3] И color
тип ввода может быть представлен как вводимый текст, просто проверяя, что введенное значение является правильным шестнадцатеричным представлением цвета в соответствии со спецификацией [4] или виджетом выбора цвета (последний является решением используется в большинстве браузеров, поддерживающих этот атрибут).
Подчинение
При отправке данных, введенных в формы HTML, имена и значения в элементах формы кодируются и отправляются на сервер в сообщении HTTP- запроса с использованием GET или POST . Исторически также использовалась электронная почта . [5] Тип MIME по умолчанию , Internet media type application / x-www-form-urlencoded , основан на очень ранней версии общих правил процентного кодирования URI с рядом изменений, таких как нормализация новой строки и замена пробелов на " +
" вместо " %20
". Другая возможная кодировка, Internet media type multipart / form-data , также доступна и является общей для отправки файлов на основе POST.
Использование с языками программирования
Формы обычно сочетаются с программами, написанными на различных языках программирования, чтобы разработчики могли создавать динамические веб-сайты . Самые популярные языки включают как клиентские, так и / или серверные языки.
Хотя любой язык программирования может использоваться на сервере для обработки данных формы, наиболее часто используемыми языками являются языки сценариев , которые, как правило, имеют более сильную функциональность обработки строк, чем языки программирования, такие как C, а также имеют автоматическое управление памятью, которое помогает предотвратить атаки переполнения буфера .
Сторона клиента
Де - факто на стороне клиента сценариев язык для веб - сайтов JavaScript . Использование JavaScript в объектной модели документа (DOM) приводит к методу динамического HTML, который позволяет динамически создавать и изменять веб-страницу в браузере.
Хотя клиентские языки, используемые в сочетании с формами, ограничены, они часто могут служить для предварительной проверки данных формы и / или для подготовки данных формы для отправки в программу на стороне сервера. Однако это использование заменяется новыми типами полей ввода HTML5 и обязательным атрибутом.
Выполнение на стороне сервера
Код на стороне сервера может выполнять широкий спектр задач для создания динамических веб-сайтов, которые по техническим причинам или по соображениям безопасности не может выполнять код на стороне клиента - от аутентификации входа в систему , получения и хранения данных в базе данных , проверки орфографии и отправки. электронная почта . Существенным преимуществом выполнения на стороне сервера перед выполнением на стороне клиента является концентрация функций на сервере вместо того, чтобы полагаться на разные веб-браузеры для реализации различных функций единообразными и стандартизованными способами. Кроме того, обработка форм на сервере часто приводит к повышению безопасности, если выполнение на стороне сервера спроектировано так, чтобы не доверять данным, предоставленным клиентом, и включает такие методы, как очистка HTML . Одним из недостатков серверного кода является масштабируемость : обработка на стороне сервера для всех пользователей происходит на сервере, тогда как обработка на стороне клиента происходит на отдельных клиентских компьютерах.
Интерпретируемые языки
Некоторые из интерпретируемых языков, обычно используемых для разработки интерактивных форм в веб-разработке, - это PHP , Python , Ruby , Perl , JSP , Adobe ColdFusion, а некоторые из наиболее часто используемых компилируемых языков - это Java и C # с ASP.NET .
PHP
PHP - один из очень распространенных языков, используемых для "программирования" на стороне сервера, и один из немногих языков, созданных специально для веб-программирования . [6] [7]
Чтобы использовать PHP с формой HTML, URL-адрес сценария PHP указывается в action
атрибуте тега формы. Целевой файл PHP затем обращается к данным, передаваемым формой через PHP $_POST
или $_GET
переменные, в зависимости от значения method
атрибута, используемого в форме. Вот базовый PHP-скрипт обработчика форм, который будет отображать содержимоеимя поле ввода на странице:
form.html
< html >< голова >< title > Форма title >голова >< тело >< form action = "form_handler.php" >Имя: < input name = "firstname" type = "text" >< input type = "submit" value = "Submit" >форма >body >html >
form_handler.php
< html >< голова >< title > Вывод title >голова >< тело > php// Это напечатает все, что пользователь ввел на страницу form.html.$ name = filter_input ( INPUT_GET , 'имя' , FILTER_SANITIZE_STRING );эхо "Привет," . $ name . "!" ;?>body >html >
В приведенном выше примере кода используется функция PHP для очистки ввода пользователя перед его вставкой на страницу. Простая печать (повторение) пользовательского ввода в браузере без предварительной проверки - это то, чего следует избегать в обработчиках защищенных форм: если пользователь ввел код JavaScript вfilter_input()
<script>alert(1)script>
имя поле, браузер выполнит скрипт на form_handler.phpстраница, как если бы она была закодирована разработчиком; таким образом мог быть выполнен вредоносный код. был представлен в PHP 5.2. Пользователи более ранних версий PHP могли использовать функцию или регулярные выражения для очистки пользовательского ввода перед тем, как что-либо с ним делать.filter_input()
htmlspecialchars()
Язык программирования Perl
Perl - еще один язык, часто используемый для веб-разработки . Сценарии Perl традиционно используются как приложения Common Gateway Interface (CGI). Фактически, Perl - это настолько распространенный способ написания CGI, что их часто путают. CGI могут быть написаны на языках, отличных от Perl (совместимость с несколькими языками является целью разработки протокола CGI), и есть другие способы заставить сценарии Perl взаимодействовать с веб-сервером, кроме использования CGI (например, FastCGI , Plack или Apache 's mod_perl ).
Когда-то Perl CGI были очень распространенным способом написания веб-приложений . Однако сегодня многие веб-хосты фактически поддерживают только PHP, и разработчики веб-приложений часто ищут совместимости с ними.
Современный Perl 5 CGI, использующий модуль CGI с формой, подобной приведенной выше, может выглядеть так:
form_handler.pl
#! / usr / bin / env perl use strict ; используйте CGI qw (: standard) ;мое $ name = param ( 'имя' ); заголовок печати ; print html ( body ( p ( "Привет, $ name!" ), ), );
Скрипты формы для отправки по электронной почте
Среди самых простых и наиболее часто используемых типов сценариев на стороне сервера есть сценарии, которые просто отправляют содержимое отправленной формы по электронной почте. Однако этот вид сценария часто используется спамерами , и многие из наиболее популярных используемых сценариев преобразования формы в электронную почту уязвимы для взлома с целью рассылки спама. Одним из самых популярных сценариев этого типа был "FormMail.pl", созданный Matt's Script Archive . Сегодня этот сценарий больше не широко используется в новых разработках из-за отсутствия обновлений, проблем с безопасностью и сложности настройки.
Конструкторы форм
Некоторые компании предлагают формы как размещенную услугу . Обычно эти компании предоставляют какой-то визуальный редактор, инструменты отчетности и инфраструктуру для создания и размещения форм, которые можно встраивать в веб-страницы. [8] Хостинговые компании предоставляют своим клиентам шаблоны в качестве дополнительной услуги. Другие службы хостинга форм предлагают бесплатные контактные формы, которые пользователь может установить на своем собственном веб-сайте, вставив код службы в HTML-код сайта.
Смотрите также
- CAPTCHA
- Постбэк
- XForms
- HTML
Рекомендации
- ^ «HTML / Элементы / метка» . w3.org вики .
- ^ Сатром, Брэндон (ноябрь 2011 г.). «Лучшие веб-формы с формами HTML5» . Журнал MSDN . Microsoft . Проверено 20 февраля 2014 .
- ^ «Формы - HTML5» . w3.org . W3C . Проверено 20 февраля 2014 .
- ^ "тип ввода = цвет - цветовой контроль" . w3.org . W3C . Проверено 31 октября 2014 .
- ^ Поддержка пользовательского агента для отправки HTML- формна основе электронной почтыс использованием URL - адреса mailtoв качестве действия формы была предложена в разделе 5.6 RFC 1867 в эпоху HTML 3.2. Различные веб-браузеры реализовали это, вызвав отдельную программу электронной почты, используя свои собственные элементарныевозможности SMTP или превратившись в Интернет-пакеты , реализовав целые почтовые клиенты . Хотя иногда он был ненадежным, он некоторое время пользовался популярностью как простой способ передачи данных формы без использования веб-сервера илисценариев CGI .
- ^ «PHP: Препроцессор гипертекста» .
- ^ «Интернет-энциклопедия» .
- ^ Гарофало, Джош. «Введение в онлайн-формы и конструкторы форм» . Блитцен Блог .
Внешние ссылки
- Формы в документах HTML , страница спецификации W3C для форм в HTML 4.
- Спецификация форм HTML5
- Викиучебники: язык / формы гипертекстовой разметки
- Попробуйте свойства HTML.