HTML-форма

Веб -форма , веб-форма или 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 атрибут. ^[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. новым input типы полей и required атрибут.

Выполнение на стороне сервера

Код на стороне сервера может выполнять широкий спектр задач по созданию динамических веб-сайтов, которые по техническим причинам или по соображениям безопасности код на стороне клиента не может выполнять — от аутентификации входа в систему до получения и хранения данных в базе данных , проверки орфографии и отправки. электронная почта . Существенным преимуществом выполнения на стороне сервера по сравнению с выполнением на стороне клиента является концентрация функциональности на сервере вместо того, чтобы полагаться на разные веб-браузеры для реализации различных функций согласованными и стандартизированными способами. Кроме того, обработка форм на сервере часто приводит к повышению безопасности, если выполнение на стороне сервера спроектировано таким образом, чтобы не доверять данным, предоставленным клиентом, и включает такие методы, как очистка 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-скрипт обработчика формы, который будет отображать содержимое имя поле ввода на странице:

форма.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Form</title>
</head>
<body>
    <form action="form_handler.php">
        <p><label>Name: <input name="first_name" /></label></p>
        <p><button type="submit">Submit</button></p>
    </form>
</body>
</html>

form_handler.php

<!DOCTYPE html>
<?php
// requesting the value of the external variable "first_name" and filtering it.
$firstName = filter_input(INPUT_GET, "first_name", FILTER_SANITIZE_STRING);
?>
<html lang="en">
<head>
    <title>Output</title>
</head>
<body>
    <p>
        <?php echo "Hello, ${firstName}!"; /* printing the value */?>
    </p>
</body>
</html>

В приведенном выше примере кода используется PHP filter_input() функция для очистки ввода пользователя перед его вставкой на страницу. Простая печать (эхо) пользовательского ввода в браузере без предварительной проверки — это то, чего следует избегать в процессорах защищенных форм: если пользователь ввел код JavaScript <script>alert(1)</script> в имя поле, браузер выполнит скрипт в поле form_handler.php страница, как если бы она была закодирована разработчиком; вредоносный код может быть выполнен таким образом. filter_input() был представлен в PHP 5.2. Пользователи более ранних версий PHP могли использовать 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;
use CGI qw(:standard);

my $name = param("first_name");
print header;
print html(
    body(
        p("Hello, $name!"),
    ),
);

Скрипты отправки формы в электронную почту

Среди самых простых и наиболее часто используемых типов серверных сценариев есть тот, который просто отправляет по электронной почте содержимое отправленной формы. Однако этот тип сценариев часто используется спамерами , и многие из наиболее популярных используемых сценариев преобразования формы в электронную почту уязвимы для взлома с целью рассылки спам-сообщений. Одним из самых популярных скриптов этого типа был «FormMail.pl», созданный Matt's Script Archive . Сегодня этот сценарий больше не широко используется в новых разработках из-за отсутствия обновлений, проблем с безопасностью и сложности настройки.

Конструкторы форм

Некоторые компании предлагают формы в качестве размещенной услуги . Обычно эти компании предоставляют какой-то визуальный редактор, инструменты отчетности и инфраструктуру для создания и размещения форм, которые можно встроить в веб-страницы. ^[8] Хостинговые компании предоставляют шаблоны своим клиентам в качестве дополнительной услуги. Другие службы хостинга форм предлагают бесплатные контактные формы, которые пользователь может установить на свой веб-сайт, вставив код службы в HTML-код сайта.

История

HTML-формы были впервые реализованы в браузере Viola . ^[9]

См. также

Ссылки

^ «HTML/Элементы/метка» . w3.org вики . 19 мая 2023 г.
^ Сатром, Брэндон (ноябрь 2011 г.). «Улучшение веб-форм с помощью форм HTML5» . Журнал MSDN . Майкрософт . Проверено 20 февраля 2014 г.
^ «Формы – HTML5» . w3.org . W3C . Проверено 20 февраля 2014 г.
^ «тип ввода=цвет – управление цветовой лункой» . w3.org . W3C . Проверено 31 октября 2014 г.
^ Поддержка пользовательского агента для отправки HTML- mailto форм по электронной почте с использованием URL-адреса в качестве действия формы была предложена в разделе 5.6 RFC 1867 в эпоху HTML 3.2. Различные веб-браузеры реализовали его, вызывая отдельную программу электронной почты, используя свои собственные элементарные возможности SMTP или превращаясь в интернет-пакеты , реализуя целые почтовые клиенты . Хотя иногда он был ненадежным, на короткое время он был популярен как простой способ передачи данных формы без использования веб-сервера или сценариев CGI .
^ «PHP: препроцессор гипертекста» .
^ «Сеть энциклопедий» .
^ Гарофало, Джош. «Введение в онлайн-формы и конструкторы форм» . Блитценский блог .
^ «ВиолаWWW» . webdesignmuseum.org . Музей веб-дизайна . Проверено 17 февраля 2022 г.

Внешние ссылки

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

[1] «HTML/Элементы/метка» . w3.org вики . 19 мая 2023 г.

[2] Сатром, Брэндон (ноябрь 2011 г.). «Улучшение веб-форм с помощью форм HTML5» . Журнал MSDN . Майкрософт . Проверено 20 февраля 2014 г.

[3] «Формы – HTML5» . w3.org . W3C . Проверено 20 февраля 2014 г.

[4] «тип ввода=цвет – управление цветовой лункой» . w3.org . W3C . Проверено 31 октября 2014 г.

[5] Поддержка пользовательского агента для отправки HTML- mailto форм по электронной почте с использованием URL-адреса в качестве действия формы была предложена в разделе 5.6 RFC 1867 в эпоху HTML 3.2. Различные веб-браузеры реализовали его, вызывая отдельную программу электронной почты, используя свои собственные элементарные возможности SMTP или превращаясь в интернет-пакеты , реализуя целые почтовые клиенты . Хотя иногда он был ненадежным, на короткое время он был популярен как простой способ передачи данных формы без использования веб-сервера или сценариев CGI .

[6] «PHP: препроцессор гипертекста» .

[7] «Сеть энциклопедий» .

[8] Гарофало, Джош. «Введение в онлайн-формы и конструкторы форм» . Блитценский блог .

[9] «ВиолаWWW» . webdesignmuseum.org . Музей веб-дизайна . Проверено 17 февраля 2022 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]