Формы встречаются в интернете почти на каждом сайте. Например, когда Вы вводите логин и пароль на сайте, то данные заполняются через формы и отправляются на сервер. Также примером формы являются различные опросы.
Синтаксис тега
Тег
, где рассмотрены радиокнопки, списки, флажки, текстовые поля, кнопки.
Теперь рассмотрим подробно все атрибуты тега
.
Атрибуты и свойства тега
1. Атрибут accept-charset="Кодировка"
- определяет кодировку, в которой сервер может принимать и обрабатывать данные формы. Может принимать различные значения, например, CP1251, UTF-8 и т.п.
2. Атрибут action="URL"
- адрес скрипта, который обрабатывает передаваемые данные от формы. Если оставить это значение пустым, то данные будут обрабатываться в этом же документе, где расположена форма.
3. Атрибут autocomplete="on/off"
- задает или отключает автозаполнение формы. Может принимать два значения:
on
- включить автозаполнение;
off
- выключить автозаполнение;
4. Атрибут enctype="параметр"
- задает способ кодирования данных. Может принимать следующие значения:
application/x-www-form-urlencoded
- вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями
multipart/form-data
- данные не кодируются
text/plain
- пробелы заменяются знаком +, буквы и другие символы не кодируются.
5. Атрибут method="POST/GET"
- задает метод отправки. Может принимать два значения:
GET
- передача данных в адресной строке (есть ограничение по объёму отправки данных)
POST
- посылает на сервер данные в запросе браузера (может отправить большое количество данных, т.к. нету ограничения объёма)
6. Атрибут name="имя"
- задает имя формы. Чаще всего используется в случае наличия множества форм для того, чтобы можно было обратиться к конкретной форме через скрипт.
7. Атрибут novalidate
- отменяет встроенную проверку данных формы на корректность ввода.
8. Атрибут target="параметр"
- имя окна или фрейма, куда обработчик будет загружать возвращаемый результат. Может принимать следующие значения:
_blank
- загружает страницу в новое окно браузера
_self
- загружает страницу в текущее окно
_parent
- загружает страницу во фрейм-родитель
_top
- отменяет все фреймы и загружает страницу в полном окне браузера
Уважаемый читатель, теперь Вы узнали гораздо больше о html теге form. Теперь советую перейти к следующему уроку.
...
содержимое формы...
Как раз внутри элемента form должны располагаться элементы управления, которых может быть сколь угодно много.
Атрибуты формы:
В атрибуте action указывается серверный файл со скриптом, ответственным за основную обработку данных, пересылаемых из формы. Обычно код этого файла пишется на серверном языке программирования, например, на языке php
или perl
.
Атрибут enctype указывает на тип передаваемой на сервер информации, если это просто текстовые данные — text/plain , если с формой отсылаются файлы, то следует указать multipart/form-data .
Атрибут method указывает и определяет форму передачи данных. Подробно мы на этом останавливаться не будем, однако следует сказать, что для более надежной передачи следует указать метод post .
Элементы формы html
<input
type
=
"text"
name
=
"login"
size
=
"20"
value
=
"Логин"
maxlength
=
"25"
>
Результат:
Значение атрибута type — text — указывает на то, что это именно текстовое поле
size — размер текстового поля в символах
maxlength — максимальное кол-во вмещающихся в поле символов
value — первоначальный текст в текстовом поле
name — имя элемента, необходимо для обработки данных в файле-обработчике
Результат:
Вместо текста в поле отображается маска — звездочки или кружочки
<input
type
=
"submit"
value
=
"Отправить данные"
>
Результат:
Кнопка submit собирает все данные с формы, введенные пользователем и отправляет их по адресу, указанному в атрибуте action формы.
<input
type
=
"reset"
value
=
"Очистить форму"
>
Результат:
Кнопка возвращает состояние всех элементов управления к первоначальному (очищает форму)
<input
type
=
"checkbox"
name
=
"asp"
value
=
"yes"
>
ASP<br
>
<input
type
=
"checkbox"
name
=
"js"
value
=
"yes"
checked
=
"checked"
>
javascript<br
>
<input
type
=
"checkbox"
name
=
"php"
value
=
"yes"
>
PHP<br
>
<input
type
=
"checkbox"
name
=
"html"
value
=
"yes"
checked
=
"checked"
>
HTML<br
>
ASP
javascript
PHP
HTML
Результат:
ASP javascript PHP HTML
В html флажок служит для организации множественного выбора, т.е. когда необходимо и возможно выбрать несколько вариантов ответа
<input
type
=
"radio"
name
=
"book"
value
=
"asp"
>
ASP<br
>
<input
type
=
"radio"
name
=
"book"
value
=
"js"
>
Javascript<br
>
<input
type
=
"radio"
name
=
"book"
value
=
"php"
>
PHP<br
>
<input
type
=
"radio"
name
=
"book"
value
=
"html"
checked
=
"checked"
>
HTML<br
>
ASP
Javascript
PHP
HTML
Результат:
ASP Javascript PHP HTML
radio кнопка html служит для единственного выбора из нескольких вариантов
Атрибут checked устанавливает сразу элемент отмеченным
Важно:
Для элементов radio
необходимо, чтобы значение атрибута name
у всех элементов в группе было одинаковым: в таком случае элементы будут работать взаимосвязано, при включении одного элемента, другие буду отключаться
Выпадающий список HTML
Рассмотрим пример добавления выпадающего списка:
1
2
3
4
5
6
<select
name
=
"book"
size
=
"1"
>
<option
value
=
"asp"
>
ASP</
option
>
<option
value
=
"js"
>
JavaScript</
option
>
<option
value
=
"php"
>
PHP</
option
>
<option
value
=
"html"
selected
=
"selected"
>
HTML</
option
>
</
select
>
Результат:
Выпадающий список состоит из главного тега — select — который имеет закрывающую пару, а каждый пункт списка — это тег option , внутри которого отображается текст пункта
Атрибут size со значением «1»
указывает на то, что список в свернутом виде отображает один пункт, остальные открываются при щелчке на стрелочке меню
Атрибут selected у пункта (option) указывает на то, что именно этот пункт будет изначально виден, а остальные пункты «свернуты»
Для больших и сложных списков есть возможность добавить подзаголовки
— тег optgroup с атрибутом label (надпись):
1
2
3
4
5
6
7
8
9
10
11
12
<select
name
=
"book"
size
=
"1"
>
<optgroup
label
=
"Английские"
>
<option
value
=
"asp"
>
ASP</
option
>
<option
value
=
"js"
>
JavaScript</
option
>
<option
value
=
"php"
>
PHP</
option
>
<option
value
=
"html"
selected
=
"selected"
>
HTML</
option
>
</
optgroup
>
<optgroup
label
=
"Русские"
>
<option
value
=
"asp_rus"
>
ASP по-русски</
option
>
<option
value
=
"js_rus"
>
JavaScript по-русски</
option
>
</
optgroup
>
</
select
>
Для предоставления возможности выбора нескольких пунктов одновременно
необходимо добавить атрибут multiple . Но в таком случае и атрибут size следует установить в значение, большее, чем 1:
Результат:
Ширина элемента зависит от атрибута cols , который указывает сколько символов помещается по горизонтали
Атрибут rows определяет количество строк в элементе
Другие элементы
Дополнительные элементы и атрибуты
Для элементов управления radio
и checkbox
удобно использовать дополнительные элементы, которые, во-первых, делают привязку текста к самому элементу radio или checkbox, во-вторых, добавляют обводку при клике:
<input
type
=
"checkbox"
id
=
"book1"
>
<label
for
=
"book1"
>
ASP</
label
>
В примере создана надпись (тег label) для элемента checkbox . Привязка осуществляется через атрибут id , значение которого указано в атрибуте for надписи.
Результат:
Атрибут disabled позволяет блокировать элемент, делая его недоступным для изменения пользователем:
<input
type
=
"text"
name
=
"login"
size
=
"20"
value
=
"Логин"
maxlength
=
"25"
disabled
=
"disabled"
>
<input
type
=
"checkbox"
name
=
"asp"
value
=
"yes"
>
ASP<br
>
<input
type
=
"checkbox"
name
=
"js"
value
=
"yes"
checked
=
"checked"
disabled
=
"disabled"
>
javascript<br
>
ASP
javascript
HTML-формы
являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.
Веб-формы состоят из набора текстовых полей, кнопок, списков и других элементов управления, которые активизируются щелчком мыши. Технически формы передают данные от пользователя удаленному серверу.
Для получения и обработки данных форм используются языки веб-программирования, такие как PHP
, Perl
.
До появления HTML5 веб-формы представляли собой набор нескольких элементов , , завершающихся кнопкой . Для стилизации форм в разных браузерах приходилось прилагать немало усилий. Кроме того, формы требовали применения JavaScript для проверки введенных данных, а также были лишены специфических типов полей ввода для указания повседневной информации типа дат, адресов электронной почты и URL-адресов.
HTML5-формы
решили большинство этих распространенных проблем благодаря наличию новых атрибутов, предоставив возможность изменять внешний вид элементов форм за счет CSS3
.
Рис. 1. Улучшенные веб-формы с помощью HTML5
Создание HTML5-формы
1. Элемент
Основу любой формы составляет элемент
...
. Он не предусматривает ввод данных, так как является контейнером, удерживая вместе все элементы управления формы – поля
. Атрибуты этого элемента содержат информацию, общую для всех полей формы, поэтому в одну форму нужно включать поля, объединенные логически.
Таблица 1. Атрибуты тега
Атрибут
Значение / описание
accept-charset
Значение атрибута представляет собой разделенный пробелами список кодировок символов
, которые будут использоваться для отправки формы, например,
.
action
Обязательный атрибут
, который указывает url обработчика формы на сервере, которому передаются данные. Представляет из себя файл (например, action.php), в котором описано, что нужно делать с данными формы. Если значение атрибута не будет указано, то после перезагрузки страницы элементы формы примут значения по умолчанию.
В случае, если вся работа будет выполняться на стороне клиента сценариями JavaScript, то для атрибута action можно указать значение # .
Также можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого нужно внести следующую запись:
autocomplete
enctype
Используется для указания MIME
-типа данных, отправляемых вместе с формой, например, enctype="multipart/form-data" . Указывается только в случае method="post" .
application/x-www-form-urlencoded — тип содержимого по умолчанию, указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как + , а специальный символ, например, такой как! будет закодирован шестнадцатиричной форме как %21 .
multipart/form-data — используется для отправки форм, содержащих файлы, не-ASCII данные и бинарные данные, состоит из нескольких частей, каждая из которых представляет содержимое отдельного элемента формы.
text/plain — указывает на то, что передается обычный (не html) текст.
method
Задает способ передачи данных формы.
Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2 . Имена и значения переменных присоединяются к адресу сервера после знака? и разделяются между собой знаком & . Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn , пробел заменяется на + . Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.
Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.
name
Задает имя формы
, которое будет использоваться для доступа к элементам формы через сценарии, например, name="opros" .
novalidate
Отключает проверку в кнопке для отправки формы. Атрибут используется без указания значения
target
Указывает окно, в которое будет направлена информация:
_blank — новое окно
_self — тот же фрейм
_parent — родительский фрейм (если он существует, если нет — то в текущий)
_top — окно верхнего уровня по отношению к данному фрейму. Если вызов происходит не из дочернего фрейма, то в тот же фрейм.
2. Группировка элементов формы
Элемент
предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.
Каждой группе элементов можно присвоить название с помощью элемента