Webform , веб - формы или формы HTML на веб - странице позволяет пользователю вводить данные , которые посылаются на сервер для обработки. Формы могут напоминать бумажные формы или формы базы данных, потому что веб-пользователи заполняют формы с помощью флажков, переключателей или текстовых полей . Например, формы могут использоваться для ввода данных доставки или данных кредитной карты для заказа продукта или могут использоваться для получения результатов поиска из поисковой системы .
Описание [ править ]
Формы заключены в HTML- <form>
элемент. Этот элемент определяет конечную точку связи, на которую должны быть отправлены данные, введенные в форму, и метод отправки данных, 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 по умолчанию , 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
<! DOCTYPE html>< html >< голова >< title > Форма </ title ></ голова >< тело >< form action = "form_handler.php" >Имя: < input name = "firstname" type = "text" >< input type = "submit" value = "Submit" ></ форма ></ body ></ html >
form_handler.php
<! DOCTYPE html>< 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 .
- ^ "input type = color - color-well control" . w3.org . W3C . Проверено 31 октября 2014 .
- ^ Поддержка пользовательского агента для отправки HTML- формна основе электронной почтыс использованием URL - адреса mailtoв качестве действия формы была предложена вразделе 5.6 RFC 1867 в эпоху HTML 3.2. Различные веб-браузеры реализовали это, вызвав отдельную программу электронной почты, используя свои собственные рудиментарныевозможности SMTP или превратившись в Интернет-пакеты , реализовав целые почтовые клиенты . Хотя иногда он был ненадежным, он некоторое время пользовался популярностью как простой способ передачи данных формы без использования веб-сервера илисценариев CGI .
- ^ "PHP: Препроцессор гипертекста" .
- ^ "Энциклопедия Web" .
- ↑ Гарофало, Джош. «Введение в онлайн-формы и конструкторы форм» . Блитцен Блог .
Внешние ссылки [ править ]
- Формы в HTML-документах , страница спецификации W3C для форм в HTML 4.
- Спецификация форм HTML5
- Викиучебники: язык / формы гипертекстовой разметки
- Попробуйте свойства HTML.