- Форма (HTML)
-
Форма (англ. form) в HTML — раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. Синтаксически форма в HTML задаётся с помощью элемента
form
и в дополнение к разметке обычных элементов содержит разметку для элементов управления (англ. controls), надписей (англ. label) и других[1][2].Содержание
Пример
Простая форма для ввода данных о новом пользователе[1]:
<form action="http://example.com/app/profile" method="post"> <p> <label for="username">Имя: </label> <input type="text" id="username" /><br /> <label for="nick">Ник: </label> <input type="text" id="nick" /><br /> <label for="email">Адрес эл. почты: </label> <input type="text" id="email" /><br /> <label for="sex">Пол: </label> <input type="radio" name="sex" value="male">мужской<br /> <input type="radio" name="sex" value="female">женский<br /> <input type="submit" value="Отправить"> <input type="reset" value="Отменить"> </p> </form>
В этом примере форма содержит три текстовых поля для ввода текстовой строки, радиокнопки для выбора пола, кнопки для отправки (англ. submit) и очистки (англ. reset) формы.
Элементы управления
Элементы управления служат для взаимодействия пользователя с формой. Атрибут
name
определяет имя элемента управления с областью видимости внутри данной формы.С каждым элементом формы связано начальное и текущее значение. За некоторыми исключениями (
textarea
,object
), начальное значение может быть задано атрибутомvalue
. Значения, соответствующие элементам, могут изменяться при взаимодействии пользователя или скриптов (например, на Javascript) с формой. При очистке (англ. reset) формы элементы приобретают начальные значения. Данные всех действующих (англ. successful) элементов формы отправляются (англ. submit) на обработку в виде пар имя-значения[1][2].Типы
В HTML определены следующие элементы управления:
- кнопка: элемент
input
типовsubmit
,image
,reset
,button
, а также элементbutton
, - чекбокс (флажок): тип
checkbox
- радиокнопка: тип
radio
- меню: элемент
select
с элементамиoptgroup
иoption
внутри - строка текста: тип
text
, а также элементtextarea
- пароль: тип
password
- скрытое поле: тип
hidden
- файл: тип
file
- объект: элемент
object
HTML5 определяет дополнительные элементы (кросс-браузерность пока отсутствует)[3]:
- элемент
datalist
с вариантами автозаполнения строки текста, - элемент
output
для результа вычисления на основе других полей, - элемент
keygen
для генерации пары ключей для использования в механизме аутентификации.
Элемент form
Форма задаётся с помощью элемента
form
, внутри которого и располагаются элементы управления. Кроме общих для HTML атрибутов, вform
могут присутствовать следующие[1][2]:action
(действие) — обязательный атрибут, содержащий URI обработчика формы;method
(метод отправки формы) — атрибут, принимающий значения GET (по умолчанию) или POSTenctype
(тип кодирования для содержимого) — по умолчаниюapplication/x-www-form-urlencoded
(всегда для метода GET), но обычно употребляется multipart/form-dataaccept
— список MIME-типов для загрузки файловname
— имя формыonsubmit
— обработчик события «форма отправлена»onreset
— обработчик событие: «форма очищена»accept-charset
список поддерживаемых наборов символов
Отправка формы
Для отправки формы имеются два метода: get и post. Метод get рекомендуется использовать в случаях, когда при обработке формы на стороне сервера не происходит побочных действий, например, поиск. В противном случае, когда на стороне сервера подразумевается модификация в базах данных и т. п., требуется использовать метод post[1].
Примечания
- ↑ 1 2 3 4 5 Спецификация языка HTML, переводчик: А. Пирамидин, intuit.ru, ISBN 978-5-94774-648-8, 17. Лекция: Формы.
- ↑ 1 2 3 Forms in HTML documents (англ.) Спецификация W3C для HTML4
- ↑ HTML5 Form Elements, w3schools
Для улучшения этой статьи желательно?: - Найти и оформить в виде сносок ссылки на авторитетные источники, подтверждающие написанное.
- Добавить иллюстрации.
Веб и веб-сайты Глобально Локально Виды сайтов
и сервисовВиртуальный атлас • Баннерная сеть • Блог (платформа) • Видеохостинг • Вики (список движков • список сайтов) • Сайт-визитка • Вопрос-ответ • Закладки • Службы знакомств • Каталог ресурсов • Интернет-магазин • Микроблог • Тамблелог • Новостной сайт • Поисковая система (список) • Порносайт • Социальная сеть • BitTorrent-трекер • Файлообменник • Форум (Сервис • Имиджборд) • Фотохостинг • Чат
Создание и
обслуживаниеТипы макетов,
страниц, сайтовТехническое Веб-сервер (сравнение) • Браузер (список • сравнение) • CMF (список (англ.)) • CMS (список (англ.)) • HTTP (ответы • заголовки) • SPDY • CGI • HTML • XHTML • CSS • JavaScript • DHTML • DOM • XML • AJAX • JSON • Flash • RSS • Atom • Микроформат • favicon.ico • robots.txt • Sitemaps • Карта сайта • .htaccess
Маркетинг Социум и культура Категории:- Гипертекст
- HTML
- кнопка: элемент
Wikimedia Foundation. 2010.