HTML-форма

Веб -форма , веб-форма или 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 использовать строгий ; использовать 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]

• КАПЧА
• Постбэк
• XForms
• HTML

• Формы в HTML-документах, страница спецификации W3C для форм в HTML 4 .
• Спецификация форм HTML5
• Wikibooks: язык/формы разметки гипертекста
• Попробуйте свойства HTML.