HTML / 9. Формы

Тег <input>

Используйте тег <input> при определении одного из ряда обычных элементов управления форм (controls, как они называются в стандартах HTML и XHTML), в числе которых поля ввода текста, списки множественного выбора, карты и кнопки. Хотя у тега <input> много атрибутов, только атрибут name должен присутствовать в каждом элементе (существует исключение из этого правила для кнопок отправки и обновления формы; объяснения следуют далее). И как мы детально обсудим далее, элементы формы каждого типа используют только некоторое подмножество из числа возможных атрибутов тега.

Добавочные атрибуты тега <input> могут оказаться обязательными, в зависимости от того, какого типа элемент определяется.Тип элемента, который следует включить в форму, указывается с помощью обязательного атрибута type тега <input>; имя поля (используемое в процессе передачи формы серверу; см. предыдущие объяснения) задается атрибутом name. Если вы его опустите, умолчанием для поляtype будет text. Хотя, с формальной точки зрения, значением атрибута name может быть любая строка, мы рекомендуем употреблять имена без пробелов и специальных знаков. Если придерживаться использования только латинских букв и цифр (но не начинать имя с цифры), а пробелы представлять подчеркиванием (_), то проблем будет заметно меньше. Например, «cost_in_dollars» (цена в долларах) и «overhead_percentage » (накладные расходы в процентах) – это хорошо выбранные имена элементов; а «$COST», «накладные расходы %» или даже «overhead %» могут привести к трудностям.

Обратите внимание, что назначенное вами имя элемента формы прямо ассоциировано с данными, вводимыми пользователем, которые будут переданы затем обрабатывающему форму серверу. Это вовсе не то же самое и играет совсем иную роль, нежели атрибут name для гиперссылки или фрейма.

Поля ввода текста
Стандарты HTML 4 и XHTML позволяют включать в формы поля ввода текста четырех видов: традиционные поля ввода, маскированныеполя для ввода секретной информации, поля для ввода имени файла, который должен передаваться как часть данных формы, и специальное многострочное окно ввода – тег <textarea>. Первые три определяются при помощи тега <input>, четвертое представляется отдельным тегом.

Традиционные поля ввода
Самыми распространенными элементами формы являются поля ввода для имен пользователей, адресов и других уникальных данных. Поле ввода выглядит в окне броузера как пустое окно, содержащее строку, и принимает в себя одну строку пользовательского ввода, которая становится значением этого поля после того, как пользователь отправляет форму серверу. Чтобы создать поле ввода внутри формы в документе, присвойте значение text атрибуту type тега <input>. Включите в тег атрибут name – он обязательный.

Что такое строка текста, различные броузеры могут понимать по-разному. К счастью, HTML и XHTML дают возможность при помощи атрибутов size и maxlength определять ширину окна ввода и допустимое количество принятых символов. Значение каждого из атрибутов – это число, равное максимальному количеству символов, которое пользователь может видеть и соответственно набрать в окне ввода. Если maxlength больше, чем size, текст перемещается в окне вперед и назад. Если maxlength меньше, чем size, в окне ввода всегда будет оставаться свободное пространство. Это и составляет разницу между двумя атрибутами.

Принимаемое по умолчанию значение атрибута size зависит от броузера и обычно составляет 80 символов. Если maxlength опущен, длина ввода не ограничена. Мы рекомендуем устанавливать значения этих атрибутов. Подберите величину size так, чтобы окно ввода не выходило за пределы обычного окна броузера (около 60 символов с очень ко-
роткой подсказкой). Присвойте maxlength разумное значение: 2 – для сокращенных названий штатов, 12 – для телефонных номеров и т. д.

Поле текстового ввода обычно пусто, пока посетитель не наберет в нем что-нибудь. Можно, однако, указать его начальное, принимаемое по умолчанию значение при помощи атрибута value. Пользователь может его, конечно, изменить. Если он нажмет кнопку «Сброс» (Reset), поле снова примет начальное значение.

Вот допустимые объявления полей ввода:

<input type=text name=comments>
<input type=text name=zipcode size=10 maxlength=10>
<input type="text" name="address" size="30" maxlength="256" />
<input type="text" name="rate" size="3" maxlength="3" value="100" />

Первый пример соответствует стандарту HTML и создает поле ввода текста с максимальной длиной и шириной, которые по умолчанию задает сам броузер. Как уже говорилось, такое решение – не самое удач-ное, поскольку принятые по умолчанию значения широко варьируются от броузера к броузеру, и макет формы будет наверняка плохо выглядеть на некоторых из них. Лучше фиксируйте ширину окна ввода и максимальное число символов, которое допустимо принять от пользователя, как мы это делаем во втором примере. Он позволяет набрать не более десяти символов внутри окна шириной в десять символов. Когда пользователь отправит форму серверу, значение этого поля будет послано с именем «zipcode».

Третий пример соответствует стандарту XHTML и предлагает броузеру отобразить окно для ввода текста шириной в 30 символов, в котором пользователю разрешается набрать до 256 символов. Броузер автоматически будет прокручивать текст в окне, показывая символы, вводимые сверх его ширины.

Последнее окно ввода, тоже XHTML, имеет ширину в три символа, допускает ввод трех символов, и его начальное значение – 100. Отметьте, что во втором и четвертом примерах подразумевается, что пользователь будет вводить данные определенного вида – почтовый
индекс и соответственно числовую величину. Позволяя ограничить количество вводимых символов, ни HTML, ни XHTML не предоставляют способа указать, какие знаки можно набирать в окне ввода. К примеру, в последнее поле пользователь может ввести «ABC», хотя вы рассчитывали, что это будет число меньше 1000. Ваше приложение со стороны сервера или сценарий со стороны клиента должны отлавливать ошибочный ввод, проверять полноту заполнения формы и отправлять пользователю соответствующее сообщение, если что-то оказалось не в порядке. Все это обернется изрядной скукой, поэтому стоит опять подчеркнуть: подготовьте ясные и точные инструкции и подсказки.
Убедитесь, что ваша форма ясно говорит пользователю, какого рода ввод вы от него ожидаете, уменьшая тем самым число ошибок, которые он может сделать при ее заполнении.

Маскированное поле ввода
Подобно маске на лице Одинокого рейнджера или Зорро, маска на поле ввода служит благим целям. Само поле ведет себя так же, как и традиционное поле ввода, за одним лишь исключением: вносимые пользователем символы не появляются на экране. Броузеры скрывают их в маскированном тексте, чтобы спрятать пароли и другие секретные
коды от любопытных глаз.

Чтобы создать маскированное поле ввода, присвойте атрибуту type значение password. Все другие атрибуты и семантика традиционного поля применяются и в этом случае. Следовательно, вы должны снабдить поле именем и можете установить для него size, maxlength и (мы рекомендуем это сделать) начальное значение value. Не обольщайтесь – маскированное поле не такое уж защищенное. Набранное значение скрыто только на экране, а броузер передает его сер-веру незашифрованным, если только вы не работаете на веб-сервере, использующем SSL (Secure Sockets Layer), например на https-сервере.
Таким образом, хотя любопытные глаза, возможно, ничего не увидят на экране, не исключено, что хитроумные злодеи украдут информацию электронным способом.

Поле выбора файла
Как следует из названия, поле выбора файла дает возможность пользователям выбрать хранящийся на их компьютере файл и послать его серверу вместе с формой. Поле выбора файла в форме создается, когда атрибуту type присваивается значение file. Как и для других текстовых полей, следует установить подходящие значения атрибутов size и maxlength. По умолчанию броузер открывает окно ввода шириной в 20 символов.

Броузер выводит это поле на экран, как другие поля текстового ввода, добавляя справа кнопку «Browse» (Обзор). Пользователь либо набирает прямо в поле путь к файлу, либо, нажав на кнопку «Browse», ищет имя локально хранящегося файла при помощи диалогового окна, вид которого определяется системой компьютера.

Кнопка «Browse» (Обзор) открывает специфичное для платформы диалоговое окно, позволяющее выбрать значение поля. В этом случае в поле размещается полный путь к файлу, даже если его длина превышает установленное значение maxlength. Используйте атрибут accept, чтобы определить типы файлов, которые броузер позволит выбрать, даже если он и не контролирует, что именно вводят пользователи в качестве пути к файлу. Значением этого атрибута служит список разделенных запятыми MIME-кодов. Пользователи смогут отправлять только те файлы, типы которых есть в списке. К примеру, чтобы ограничить выбор изображениями, стоит добавить accept="image/*" в тег <input>.
В отличие от других элементов ввода, поле выбора файла работает корректно только с определенной кодировкой данных формы и специфическим методом передачи. Если в форму включено одно или несколько таких полей, следует присвоить атрибуту enctype тега <form> значение multipart/form-data, а атрибуту method значение post. В противном случае поле выбора файла ведет себя как обычное текстовое поле, передавая серверу свое значение (являющееся путем к файлу) вместо содержимого самого файла.

Все это проще, чем может показаться. Вот пример HTML-формы, которая запрашивает личное имя пользователя и его любимый файл:

<form enctype="multipart/form-data" method=post
action="cgi-bin/save_file">
Ваше имя: <input type=text size=20 name=the_name>
<p>Ваш любимый файл: <input type=file size=20 name=fav_file>
</form>

Данные, которые в результате заполнения и отправки формы будут посланы броузером серверу, состоят из двух частей. Первая включает значение поля «the_name», а вторая охватывает имя и содержимое выбранного пользователем файла:

-----------------------------6099238414674
Content-Disposition: form-data; name="the_name"

Одна строка содержимого текстового поля
-----------------------------6099238414674
Content-Disposition: form-data; name="fav_file"; filename="abc"
Content-Type: text/plain1
Первая строка файла
...
Последняя строка файла
-----------------------------6099238414674--

Броузер не проверяет, указал ли пользователь действительное имя файла. Если имя отсутствует, раздел filename заголовка Content-Disposition будет пустым. Если указанного файла не существует, его имя появится в подзаголовке filename, но не будет заголовка Content-Type и последующих строк содержимого файла. Существующие файлы могут содержать неотображаемые или двоичные данные. Нет возможности ограничить типы файлов, выбираемых пользователем. В свете этих потенциальных проблем приложение, обрабатывающее форму со стороны сервера, должно быть достаточно устойчивым, чтобы справляться с потерянными или чрезвычайно большими файлами либо с теми из них, что содержат некорректные данные или хранятся в необычных и неожиданных форматах.

Выключатели
Выключатели (checkbox), или флажки, в форме дают пользователю способ быстро и легко проводить или отменять выбор объекта. Кроме того, их можно группировать, представляя список объектов, каждый из которых можно выбирать независимо от других. Для создания отдельного выключателя присвойте атрибуту type тега <input> значение checkbox. Включите в тег обязательные атрибуты name и value. В передаваемой форме будут содержаться только значения элементов, выбранных пользователем. Необязательный атрибут checked (установленный) предлагает броузеру вывести выключатель с заранее
установленным флажком и вписать соответствующее значение в пере-даваемый серверу пакет, если только пользователь не щелкнул на выключателе сам, убрав флажок.
Значением выбранного выключателя, которое будет передано серверу, является строка, указанная в обязательном атрибуте value. К примеру, следующий XHTML-текст:

<form>
What pets do you own?
<p>
<input type="checkbox" name="pets" value="dog" /> Dog


<input type="checkbox" checked="checked" name="pets" value="cat" /> Cat


<input type="checkbox" name="pets" value="bird" /> Bird


<input type="checkbox" name="pets" value="fish" /> Fish
</p>
</form>

Несмотря на то что каждый выключатель на экране является частью группы, он предоставляет независимую возможность выбора. Заметьте также, что при всем уважении к любителям собак, птиц и рыб, мы заранее отметили флажком выключатель, сопоставленный кошке (Cat), поместив атрибут checked в соответствующий тег. Мы также
снабдили выключатели текстовыми метками; похожие на них значения атрибутов value не отображаются в окне броузера, но являются значениями, которые передаются серверу вместе с ассоциированным именем, если пользователь установил этот флажок. Вам также нужно применять теги абзаца или новой строки для управления макетом группы выключателей, как и других элементов формы.

В приведенном примере, если флажки стоят в окошках с метками «Cat» и «Fish», то значениями, включенными в список параметров посылаемой серверу формы, будут:

pets=cat
pets=fish

Переключатели
Переключатели очень похожи на выключатели, только пользователь может выбрать в группе лишь один объект1. Для создания кнопки переключателя присвойте атрибуту type тега <input> значение radio. Как и выключатели, каждая кнопка переключателя имеет в качестве обязательных атрибуты name и value. Кнопки переключателя с одним и тем
же именем являются членами одной группы. Одну из кнопок можно выбрать изначально, включив в ее тег атрибут checked. Если ни один элемент в группе не будет выбран, броузер не будет передавать на сервер ни имени группы, ни ее значений.

Вам следует присвоить каждой кнопке переключателя свое, отличное от других значение, чтобы после отправки формы обрабатывающий ее сервер мог знать о пользовательском выборе.

Здесь представлен предыдущий пример, переписанный в HTML и позволяющий указать одно домашнее животное в качестве любимого:

<form>
Which type of animal is your favorite pet?
<p>
<input type=radio name=favorite value="dog"> Dog
<input type=radio checked name=favorite value="cat"> Cat
<input type=radio name=favorite value="bird"> Bird
<input type=radio name=favorite value="fish"> Fish
</form>

Как и в предыдущем примере с выключателями, мы отдали предпочтение кошкам, сделав кнопку «Cat» принимаемым по умолчанию выбором. Если, например, взять другую, «Bird», броузер автоматически отменит выбор «Cat» и выделит «Bird». Когда пользователь отправит форму серверу, броузер включит в список параметров формы только одно значение с именем favorite; favorite=bird, если это ваш выбор.Один из элементов в переключателе всегда выбран, поэтому нет никакого смысла делать его с одной кнопкой – переключатель должен представлять собой группу из двух или большего числа кнопок. Для
элементов управления формы типа включить/выключить, да/нет используйте выключатели.

Активные кнопки
Хотя применяемая терминология и кажется запутанной, но в форме существует еще один класс кнопок. В отличие от выключателей и переключателей, описанных выше, они отрабатывают немедленно, их действие необратимо и они влияют на все содержимое формы, а не только на значение отдельного поля. Эти активные (за неимением лучшего термина) кнопки включают в себя кнопки отправки и сброса формы, обычные кнопки и активные изображения. Кнопки отправки и активные изображения, если они выбраны пользователем, вызывают отправку броузером всех заполненных параметров формы обрабатывающему ее серверу. Обычные кнопки не отправляют форму, но их можно использовать для вызова сценария, с целью манипулирования формой или проверки правильности ее заполнения. Кнопка сброса действует локально, стирая все, что ввел пользователь, и возвращая форму в первоначальное (принятое по умолчанию) состояние. В этом разделе мы опишем активные кнопки, которые можно создавать при помощи стандартного элемента формы <input>.
Кнопки отправки
Кнопка отправки (<input type=submit>) действует в соответствии с названием, запуская осуществляемый броузером процесс отправки формы серверу. В форме может быть несколько кнопок отправки. В элементе существуют атрибуты name и value.

Простейшую кнопку отправки (без атрибутов name и value) броузер отображает в виде маленького прямоугольника или овала с принятой по умолчанию надписью «Submit»1. В противном случае броузер помещает текст, который был включен в виде значения атрибута value. Если был добавлен атрибут name, значение атрибута value кнопки отправки
вносится в список параметров формы, который броузер отправляет серверу. Это хорошо, так как дает возможность определить, какая кнопка в форме была выбрана пользователем, позволяя обслуживать одну или несколько разных форм при помощи одного обрабатывающего приложения.

Далее следуют допустимые объявления кнопок отправки:

<input type=submit>
<input type=submit value="Заказ кумкватов">
<input type="submit" value="Срочная доставка" name="ship_style" />

Первое написано на HTML и является простейшим – броузер отображает кнопку с надписью «Submit», которая активизирует последовательность обработки формы, если была нажата пользователем. Она не добавляет элемента к списку параметров, который броузер передает обрабатывающим форму серверу и приложению.

Второй HTML-пример включает в себя атрибут value, который отображает надпись на кнопке «Заказ кумкватов». Но, как и в первом примере, значение атрибута value не попадет в список параметров формы.

Последний пример, соответствующий стандарту XHTML, устанавливает надпись на кнопке и делает ее частью списка параметров. Если пользователь нажал эту кнопку отправки, она добавит параметр shipstyle="

Срочная доставка" в список параметров формы.

Кнопки сброса
Само название кнопок сброса («Reset»), создаваемых при помощи тега формы <input>, объясняет их действие: они позволяют сбросить (стереть или установить принятые по умолчанию) значения всех элементов формы. В отличие от всех остальных, кнопка сброса не инициирует обработку формы. Обновлением элементов формы занимается броузер. Сервер не знает, нажимал ли кто-нибудь эту кнопку.

По умолчанию броузер отображает кнопку сброса с надписью «Reset»1. Надпись можно заменить, указав ее в качестве значения атрибута value. Вот два примера кнопок сброса:

<input type=reset>
<input type="reset" value="Use Defaults" />

Первая, на HTML, создает кнопку сброса с надписью «Reset» по умолчанию. Второй пример, на XHTML, предписывает броузеру нанести на кнопку надпись «Use Defaults». В ответ на нажатие обеих кнопок броузер сбросит форму в первоначальное состояние.

Активные изображения
Элементы <input type=image> создают специальные кнопки, являющиеся активными изображениями. Эти кнопки формируются из указанных изображений, а когда пользователь их нажимает, они сообщают броузеру, чтобы он отправил форму серверу и включил в список ее параметров координаты указателя мыши (x,y) в пределах данного изображения, что очень напоминает карты.Кнопки типа image должны содержать атрибут src с URL файла с изображением; в них также можно включить атрибут name и атрибут
описания alt в расчете на неграфические броузеры. Хотя и нежелательно в HTML 4, вы можете также применять атрибут align для управления выравниванием изображения в текущей строке. Используйте атрибут border для определения ширины рамки (если она имеется), в которую Netscape и Firefox заключают изображения в форме так же, как атрибут border для тега <img> (Ни Internet Explorer, ни Opera не рисуют рамки вокруг изображения тега <input> в формах.)

Вот пара допустимых активных изображений:

<input type="image" src="pics/map.gif" name="map" />
<input type=image src="pics/xmap.gif" align=top name=map>

Броузер выводит указанное изображение в потоке содержимого формы. Изображение второй кнопки будет выровнено по верху примыкающего текста, как это определяется атрибутом align. Netscape и Firefox заключат его в рамку, как делают это с изображениями, входящими в якорь (тег a), сигнализируя, что объект является активным. Когда пользователь щелкает на изображении, броузер посылает серверу горизонтальное смещение (в пикселах) указателя мыши от левого края изображения и вертикальное смещение – от верхнего края. Эти значения присваиваются имени изображения, определенному атрибутом name, за которым следуют .x и .y соответственно. Таким образом, если кто-то щелкнул мышью по кнопке-картинке в нашем примере, броузер передает серверу параметры, поименованные map.x и map.y.

Активные изображения очень похожи на карты (usemap), и подобно программам или тегам <map> со стороны клиента, их обслуживающим, ваш обработчик формы может использовать координаты (x,y) указателя мыши для выбора определенного образа действий. Следует применять активные изображения, когда для обработки пользовательского запроса нужна дополнительная информация, содержащаяся в форме. Если все, что вам нужно, – это разместить набор ссылок на одном изображении, используйте карту. Карты имеют еще одно преимущество: со стороны сервера им обеспечена автоматическая поддержка распознавания отобранных фигур в изображении, что позволяет обращаться с последним как с набором объектов, из числа которых совершается выбор. Активные изображения требуют от вас создания программ, которые будут определять, где пользователь щелкнул и как эта точка изображения должна быть преобразована в соответствующее действие сервера.

Странно, что стандарты HTML 4 и XHTML позволяют употреблять атрибут usemap с активными изображениями, но не объясняют, как при этом разрешается конфликт с обычной обработкой сервером координат (x,y) положения мыши. Мы рекомендуем не смешивать их, применяя карты за пределами форм, а активные изображения – в формах.

Статьи по HTML на эту тему:

Атрибуты формы общего назначения
Группировка элементов формы и обеспечение их надписями
Многострочные области ввода текста
Программирование форм
Тег <button>

Вернуться в раздел: HTML / 9. Формы