2.14. Формы
Общие атрибуты форм
Форма может содержать только текстовые элементы, но, как правило, формы используют элементы интерактивности: строки ввода, списки, переключатели, кнопки, флажки. Каждый такой элемент создается при помощи одного из элементов HTML. С помощью атрибутов можно задать свойства формы, — например, реакцию на действия пользователя.Большинство элементов формы может принимать определенные значения. Например, поля ввода — текст, переключатель — номер элемента, который выбран пользователем. Для доступа к этим значениям со стороны программы необходимо использование атрибута name.
В момент активизации формы часть элементов может иметь значения. В текстовое поле может быть введена строка, переключатели имеют подписи и т. д. Для задания этих значений используется атрибут value.
Атрибут
tabindex=номер
позволяет определить, в какой последовательности курсор переходит с поля на поле при нажатии клавиши Tab. На элемент с атрибутом tabindex=1 устанавливается курсор в момент раскрытия окна броузера.
В элементах управления, содержащих подписи (например, в меню) часто используются сочетания клавиш, позволяющие перевести фокус на определенный элемент. Обычно командой служит комбинация клавиш Alt и символа, подчеркнутого в названии команды. В формах HTML тоже можно использовать этот прием при помощи атрибута accesskey. Например:
accesskey="R"
Атрибут disabled позволяет сделать элемент формы недоступным для выбора. Вид элемента при этом не изменяется, но цвет текста становится более бледным. Отключенный элемент нельзя выбрать или изменить его значение.
Существуют атрибуты событий, которые непосредственно связаны с формами:
onFocus — элемент получает фокус (выбирается);
onChange — информация элемента изменена;
onBlur — элемент теряет фокус.
Элементы форм
<FORM> </FORM>
Этот элемент необходим для построения достаточно сложных форм. После заполнения формы и подтверждения ввода со стороны пользователя, введенная информация пересылается на сервер и обрабатывается при помощи CGI программы, связанной с формой. Атрибут action должен указывать на имя программы, например:<FORM action="http://адрес/имя_программы" method="post">
Элементы формы
</form>
Одним из вариантов обработки формы может быть пересылка данных по электронной почте:
action="mailto:адрес@сервер.домен"
Атрибут method используется для указания протокола, используемого для пересылки данных на сервер. Протокол GET (передача запроса серверу) используется по умолчанию. В этом случае отправка формы заключается в том, что броузер обращается к серверу по указанному адресу, к которому присоединен знак ? и данные формы. Этот метод имеет ограничение: передаваться могут только символы ASCII.
Если использовать программу на стороне сервера нельзя, используется протокол POST (отправка сообщения по электронной почте).
Атрибут enctype используется для указания способа кодирования содержимого формы.
Форму заполняют разные пользователи, поэтому для нее предусмотрен атрибут, который позволяет определить список допустимых кодировок, в которых вводится текст:
accept-charset="список_кодировок"
Можно также определить список допустимых типов данных:
accept="список_типов_данных"
Большинство форм снабжаются кнопками, которые позволяют очистить (reset) форму или подтвердить (submit) правильность ее заполнения и отослать данные. Для того чтобы определить программы-сценарии, которые должны выполняться после указанных действий пользователя, существуют два атрибута событий: onSubmit и onReset.
Стандартные атрибуты: id, class, lang, style, dir, title, target, атрибуты событий.
<INPUT>
Универсальный элемент для создания флажков, переключателей и полей ввода. Элемент не имеет конечного тега, так все параметры задаются при помощи атрибутов.Вид элемента определяет атрибут type.
type="text" — создание поля ввода. В нем можно изначально поместить произвольный текст, задав его с помощью атрибута value.
type="password" — создание строки для ввода пароля. Введенная информация отображается звездочками.
type="checkbox" — создание флажка.
type="radio" — определение одного переключателя. Для создания группы переключателей необходимо использовать несколько элементов INPUT. Элементы одной группы переключателей должны иметь одно и то же имя:
<P>Выберите один из вариантов</P>
<INPUT type="radio" name="sw1" value="1"> Первый
<INPUT type="radio" name="sw1" value="2"> Второй
<INPUT type="radio" name="sw1" value="3" checked> Третий
Атрибут checked определяет, какой из переключателей должен быть выбран по умолчанию. На рис. 2.24 показан внешний вид этой группы переключателей.
Рис. 2.24. Группа переключателей
type="button" — создание кнопки произвольного назначения.type="submit" — создание кнопки, нажатие на которую подтверждает ввод информации в форму. Атрибут value используется для определения надписи на кнопке.
type="reset" — тоже кнопка, но для отмены ввода данных в форму.
type="image" — создание кнопки с рисунком.
Для указания графического файла используется атрибут src.
Атрибут align предназначен для позиционирования кнопки с рисунком. Значения атрибута стандартные: bottom, left, middle, right, top.
type="file" — средство выбора файла для присоединения к форме. Пользователю предлагается записать имя файла в поле ввода. Кроме того, броузер автоматически создает рядом с полем ввода кнопку Обзор, которая позволяет запустить стандартное диалоговое окно для выбора файлов.
type="hidden" — скрытый от пользователя элемент. Такие элементы используются для того, чтобы включить в набор данных формы некую фиксированную информацию. По сути, это определение имени переменной и ее значения.
Остальные атрибуты необходимы для определения свойств элемента. Многие из них являются обязательными, так как обеспечивают обработку данных формы на стороне сервера.
Атрибут name должен присутствовать во всех элементах INPUT, кроме кнопок подтверждения и сброса. Значение этого атрибута определяет имя поля формы, то есть блока данных, введенных в это поле. Программа сервера по этому имени может выделить необходимые данные.
Область применения атрибута value нам уже известна. Значение атрибута или задает значение по умолчанию для поля ввода, или определяет надпись на кнопке.
Выше было показано, как атрибут checked используется при создании группы переключателей. Точно таким же способом этот атрибут может быть использован и для флажков. Его наличие показывает, что флажок должен быть установлен по умолчанию. В отличие от переключателей, одновременно может быть установлено любое количество флажков.
Атрибут size позволяет задать длину поля ввода. Длина выражается в символах, но эта величина может быть задана только приближенно. Для того чтобы разместить в поле ввода определенное количество символов, потребуется подбор значения атрибута. При этом никто не может дать гарантию, что все броузеры обеспечат требуемую длину строки, а не меньшую. Таким образом, длину поля ввода необходимо выбирать с запасом.
Атрибут maxlenght может быть использован двумя способами. Во-первых, он определяет максимальную длину строки, которая может быть записана в поле ввода. Во-вторых, при помощи этого аргумента можно ограничить размер файла, присоединяемого к форме.
Атрибут readonly (без значений) позволяет создать элемент, недоступный для редактирования.
Атрибут usemap может использоваться, если в форме создается карта (см. раздел 2.9).
Так же как и в FORM, в элементе INPUT можно использовать атрибут accept.
Допустимые общие атрибуты: accesskey, tabindex, readonly, disabled.
Стандартные атрибуты: id, class, lang, title, dir, style, атрибуты событий.
<LABEL></LABEL>
Элемент позволяет создавать надписи, связанные с другими элементами. Например, можно объединить надпись и строку для ввода текста (в данном случае фрагмента для поиска):<LABEL>Поиск: <INPUT type="text" id="poisk"></LABEL>
Если элемент LABEL и другой элемент находятся отдельно, для связывания двух элементов используется атрибут for, значение которого должно совпадать со значением атрибута id второго элемента:
<LABEL for="poisk">Поиск: </LABEL>
<INPUT type="text" id="poisk">
Для каждого элемента LABEL создается один элемент формы. Иногда элементы удобно распределить по ячейкам таблицы, обеспечив тем самым выравнивание данных в форме.
Стандартные атрибуты: accesskey id, class, lang, dir, title, style, события.
Пример формы с элементом LABEL
Элемент FORM можно использовать совместно с элементом TABLE. Подписи полей и сами поля можно разместить в разных ячейках таблицы, а можно в одной ячейке, как показано ниже. В этом случае полезно использовать элемент LABEL и выравнивание данных в ячейке таблицы вправо.<FORM action="программа" method="post">
<TABLE border=1 cellspacing=0 cellpadding=3>
<CAPTION>Введите адрес</CAPTION>
<TR>
<TD align=right><LABEL>ФИО
<INPUT type="text" size=40 name="fio1"></LABEL></TD>
</TR><TR>
<TD align=right><LABEL>Индекс
<INPUT type="text" size=40 name="ind1"></LABEL></TD>
</TR><TR>
<TD align=right><LABEL>Город (область)
<INPUT type="text" size=40 name="gor1"></LABEL></TD>
</TR><TR>
<TD align=right><LABEL>Улица, дом
<INPUT type="text" size=40 name="ul1"></LABEL></TD>
</TR><TR>
<TD align=right><LABEL>Квартира
<INPUT type="text" size=40 name="kv1"></LABEL></TD>
</TR>
</TABLE>
</FORM>
Внешний вид формы показан на рис. 2.25.
Рис. 2.25. Форма с элементом LABEL
<BUTTON> </BUTTON>
Этот элемент позволяет создавать кнопки, так же как и элемент INPUT. Но, в отличие от INPUT, он имеет конечный тег, что позволяет помещать внутрь элемента достаточно сложное содержимое. В качестве примера приведен шаблон для одновременно размещения внутри элемента текста и графики:<BUTTON name="имя_элемента" value="submit" type="submit">
Текст<IMG src="файл_рисунка.gif" alt="Комментарий"></BUTTON>
Атрибут type определяет вид элемента и может иметь несколько значений:
button — кнопка, нажатие на которую вызывает запрограммированную разработчиком реакцию;
submit — кнопка, подтверждающая, что форма заполнена;
reset — кнопка для очистки формы.
Если необходимо создать кнопку с текстом, используется следующий шаблон (в качестве примера использована ссылка на сайт прогнозов погоды):
INPUT type="button" value="Прогноз погоды"
onClick="top.location.href='http://www.wunderground.com'">
Ту же кнопку можно сделать с использованием графического варианта надписи:
<BUTTON onClick="top.location.href='http://www.wunderground.com'">
<IMG src="prognoz.gif" width=140 height=20 alt="Прогноз погоды">
</BUTTON>
Для того чтобы обеспечить реакцию кнопки, необходимо использовать атрибуты событий. Наиболее подходящий для этой цели атрибут — onClick. Он позволяет выполнить некоторую команду не только после щелчка на кнопке, но и после нажатия клавиши «пробел», если кнопка выбрана. На рис. 2.26 показан внешний вид этих кнопок.
Рис. 2.26. Варианты кнопок на основе элемента BUTTON
Стандартные атрибуты: accesskey, disabled, tabindex, name, value, id, class, lang, dir, title, style, атрибуты событий.<SELECT> <OPTION> </SELECT>
Элемент SELECT предназначен для создания списка или меню на гипертекстовой странице, а элемент OPTION — для создания пункта списка. Пояснить действие этих элементов поможет простой фрагмент, приведенный ниже:<SELECT>
<OPTION value=1>Первый пункт списка
<OPTION value=2>Второй пункт списка
<OPTION value=3>Третий пункт списка
<OPTION value=4>Четвертый пункт списка
</SELECT>
Эти элементы имеют разные атрибуты.
Для элемента SELECT используются следующие атрибуты:
name — имя меню;
multiple (без значений) — пользователь может выбрать несколько пунктов;
size —количество видимых на экране пунктов списка (по умолчанию видна одна строка);
Стандартные атрибуты: disabled, tabindex, id, class, lang, dir, title, style, события.
Для элемента OPTION можно использовать следующие атрибуты:
selected (без значений) — назначается для пункта, выбранного по умолчанию;
name — имя элемента;
value — значение, возвращаемое программе обработки, если выбран данный элемент. Стандартные атрибуты элемента OPTION: disabled, id, class, lang, dir, title, style, события.
Пример формы с элементом SELECT
C помощью элемента SELECT можно создать список со ссылками на другие ресурсы или с адресами переходов в пределах сайта:<FORM action=# method=get target=_blank>
<SELECT name=list1
onChange="top.location=this.options[this.selectedIndex].value;" size=1>
<OPTION value="current_page.htm" >
<OPTION value="page1.htm" >Страница 1
<OPTION value="page2.htm" >Страница 2
</SELECT>
</FORM>
Переход по новому адресу происходит после выбора одного из элементов списка, по событию onChange. Поэтому первый элемент списка не может содержать ссылку. Для надежной работы его значение должно содержать адрес текущей Web-страницы.
<TEXTAREA> </TEXTAREA>
При помощи этого элемента создается область для ввода или просмотра текста. На рис. 2.27 показан пример такой области, созданный при помощи следующей конструкции:<TEXTAREA name="t1" rows=6 cols=40>
Область для ввода текста </TEXTAREA>
Размеры области задаются при помощи атрибутов rows (количество строк) и cols (количество столбцов). Назначение атрибута name такое же, как и в предыдущих случаях.
Рис. 2.27. Элемент TEXTAREA
Элемент TEXTAREA может иметь атрибут readonly. Это позволяет создать область с текстовой информацией, которую нельзя редактировать в броузере.Стандартные атрибуты: disabled, tabindex, id, class, lang, dir, title, style, события.
<FIELDSET> <LEGEND> </LEGEND> </FIELDSET>
Эти два элемента предназначены для создания группы полей в форме. Их использование иллюстрирует приведенный ниже шаблон:<TABLE border=0 cellspacing=0 cellpadding=0>
<TR><TD>
<FIELDSET>
<LEGEND>Общий заголовок </LEGEND>
Строка 1: <INPUT name="s1" type="text" ><BR>
Строка 2: <INPUT name="s2" type="text" ><BR>
Строка 3: <INPUT name="s3" type="text" ><BR>
Дополнительный текст
</FIELDSET>
</TD></TR>
</TABLE>
Элемента FIELDSET объединяет другие элементы формы: пользователь видит их заключенными в рамку (рис. 2.28). По умолчанию этот элемент занимает всю ширину окна, поэтому для минимизации размера элемента его можно поместить в ячейку невидимой таблицы. Элементы формы используются обычным способом.
Рис. 2.28. Группа полей
Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент является контейнером, в нем можно размещать другие элементы HTML. Например, заголовок группы можно составить из двух строк, если использовать тег <BR>. В этом случае размер шрифта заголовка целесообразно уменьшить.С помощью атрибута align можно регулировать положение заголовка:
top — заголовок сверху (как показано на рис. 2.28);
bottom — заголовок внизу (что не всегда удается реализовать);
left — заголовок вверху и слева (значение по умолчанию);
right — заголовок вверху и справа.
Стандартные атрибуты элемента LEGEND: accesskey, id, class, lang, dir, style, title, атрибуты событий.
<ISINDEX>
Это самый простой элемент, позволяющий создать подобие формы, то есть конструкции для ведения диалога с пользователем. Он предназначен для ввода текстовой информации. Поле ввода можно дополнить строкой подсказки при помощи аргумента prompt:<ISINDEX prompt="Введите текст">
Данный элемент позволит создать поле для ввода текста. Работа этого элемента связана с определенным на текущей странице базовым URL. Допустим, задан базовый адрес:
<BASE href="http://адрес/путь">
Значение атрибута href должно представлять собой адрес некоторого поискового средства в Интернет. Если пользователь введет в поле элемента ISINDEX последовательность ключевых слов (слово1, слово2, слово3), то броузер сформирует запрос:
http://адрес/?слово1+слово2+слово3
Эта строка будет отправлена на сервер для активизации поисковой машины. Теоретически этот метод очень удобен, но на практике его применение ограничивается тем, что не все поисковые программы поддерживают стандартный синтаксис запроса (использование знаков «?» и «+»). Поэтому данный прием годится только для некоторых поисковых серверов.
Стандартные атрибуты: id, class, lang, dir, title, style.
В настоящее время не рекомендуется использовать этот элемент. Рассмотренный выше шаблон можно заменить следующим:
<FORM action="программа_обработки" method="post">
<P>Введите текст <INPUT type="text"></P>
</FORM>
Пример формы для ввода анкетных данных
Таблица в данном примере использована для того, чтобы каждый элемент формы находился на определенном месте и для создания фона. При желании рамку таблицы можно сделать невидимой.<TABLE border=1 bgcolor="gold" cellpadding=4>
<FORM action="mailto:имя@сервер.домен" method="post">
<TR>
<TD><LABEL for="name1">Имя: </LABEL></TD>
<TD><INPUT type="text" name="name1"></TD>
</TR><TR>
<TD><LABEL for="name2">Отчество: </LABEL></TD>
<TD><INPUT type="text" name="name2"></TD>
</TR><TR>
<TD><LABEL for="sname">Фамилия: </LABEL></TD>
<TD><INPUT type="text" name="sname"></TD>
</TR><TR>
<TD><LABEL for="prof1">Профессия: </LABEL></TD>
<TD><INPUT type="text" name="prof1"></TD>
</TR><TR>
<TD><LABEL for="phone1">Телефон: </LABEL></TD>
<TD><INPUT type="text" name="phone1"></TD>
</TR><TR>
<TD>Пол:
<INPUT type="radio" name="pol1" value="Male"> М
<INPUT type="radio" name="pol1" value="Female"> Ж</TD>
<TD valign="middle">
<INPUT align="bottom" type="submit" value="Отослать">
<INPUT type="reset"></TD></TR>
</FORM>
</TABLE>
В форме есть несколько текстовых полей ввода, переключатель и кнопки (рис. 2.29). Для отправки формы и стирания данных существуют стандартные кнопки, работу которых обеспечивает броузер. Подпись этих кнопок задаются внутри элемента, но могут использоваться надписи по умолчанию. Например, подпись кнопки «Сброс» не задана, поэтому она будет изменяться в зависимости от настроек операционной системы пользователя. В нерусифицированной ОС подпись этой кнопки может быть, к примеру, «Reset».
Рис. 2.29. Пример формы
Для отправки данных формы может быть использован протокол почты. После того как пользователь нажмет кнопку с надписью «Отослать» (type="submit"), данные формы будут помещены как письмо в папку «Исходящие» почтовой программы пользователя. Это достаточно неудобно, так как пользователю придется отправить письмо, запустив почтовый клиент. Такая технология используется обычно только для отладки или при невозможности использовать программу на сервере.В большинстве случаев для отправки данных формы используют программу, работающую на сервере. В этом случае указывают сетевой адрес программы для получения и обработки данных формы и метод post:
<FORM action="URL/имя_программы" method="post">
В некоторых случаях для передачи расширенного набора символов по стандарту ISO10646, в элемент необходимо включить дополнительный атрибут: enctype="multipart/form-data"
Кроме метода post может использоваться метод get:
<FORM action="URL" method="get">
© TEKCT.RU, А. Гончаров, 2007-2022
|
|