Поиск

Пример формы

Мы уже знаем достаточно элементов, чтобы создать форму. Часто формы исполь зуются для ввода анкетных данных, поэтому наш пример будет имитировать по добный документ:

<TABLE border=3>
<FORM ас11оп="таИ1о:Имя@сервер.домен" method="post">
<TR>
<TD><LABEL Гог="1туа">Имя: </label>
<TD><INPUT type="text" id="imya">
<TR>
<TD><LABEL for="familiya">(t>aM^MH: </label>
<TD><INPUT type="text" id="familiya">
<TR>
<TD><LABEL foг="telefon">Teлeфoн: </label>
<TD><INPUT type="text" id="telefon">
<TR>
<ТО>Пол:&пЬзр; &nbsp;

После того как форма будет заполнена и отправлена щелчком на кнопке Отослать, она будет помещена в папку Исходящие почтовой программы. Чтобы действитель но отослать форму, надо отправить это новое электронное послание. Если вы от правляете форму самому себе, то через несколько минут можете проверить свой электронный почтовый ящик: форма в виде письма появится в нем.

<SELECT> <OPTION> </select>

Элемент SELECT предназначен для создания списка или меню на'гипертекстовой странице, а элемент OPTION — для создания пункта списка. Пояснить действие этих элементов поможет простой фрагмент, приведенный ниже:

<SELECT>
<OPTION уа!ие=а>Первый
<OPTION уа!ие=Ь>Второй
<OPTION уа1ие=с>Третий
<OPTION value=d>4eTBep™
</select>

В результате мы получим список, показанный на рис. 4.6. Оба элемента, создаю щие список, имеют собственные атрибуты.

Атрибуты элемента SELECT могут быть следующими. Атрибут name определяв! имя меню (см. выше раздел «Общие атрибуты форм»). При помощи атрибута multiple (который не имеет значений) пользователю разрешается выбрать сразу несколько пунктов списка. Атрибут size определяет количество видимых на эк ране пунктов списка. Когда атрибут size отсутствует, список выглядит обычным образом: вначале видна только первая строка, а щелчок на кнопке со стрелкой рас крывает список. Если значение атрибута задано, то список не раскрывается, а про кручивается, причем пользователь видит только указанное количество строк. Стандартные атрибуты: disabled, tabindex, id, class, lang, dir, title, style, атрибу ты событий.

Элемент OPTION имеет другие атрибуты. Selected (без значений) определяет, ка кой из пунктов списка должен быть выбран по умолчанию, то есть при загрузке страницы. В списке только один из элементов OPTION может быть помечен таким способом. Атрибут value необходим для обработки данных на стороне сервера. Выбранный в списке пункт характеризуется значениями возвращенных атрибу тов name и value.

Стандартные атрибуты элемента OPTION: disabled, id, class, lang, dir, title, style, атрибуты событий.

<TEXTAREA> </textarea>

При помощи этого элемента создается область для ввода или просмотра текста. На рис. 4.7 показан пример такой области, созданный при помощи следующей конструкции:

<Н2>Элемент TEXTAREA
<TEXTAREA name="text001" rows=5 cols=30>
Область для ввода текста
</textareax/h2>

Размеры области задаются атрибутами rows (количество строк) и cols (количе ство столбцов). Назначение атрибута name такое же, как и в предыдущих случаях. Подобно элементу INPUT, элемент TEXTAREA может иметь атрибут readonly. Это позволяет создать элемент, недоступный для редактирования.

Стандартные атрибуты: disabled, tabindex, id, class, lang, dir, title, style, атрибу ты событий.

Элементы SELECT и TEXTAREA могут быть использованы не в составе формы, а как самостоятельные детали Webстраницы. Их применение оправдано в тех случа ях, когда надо увеличить плотность размещения данных. При помощи элемента SELECT можно создавать списки, которые получаются более компактными, нежели стандартные списки, рассмотренные в разделе «Списки» главы 3. Область ввода текста также поможет сэкономить место на странице за счет того, что сколь угод но большой текст будет прокручиваться в окне фиксированного размера.

< BUTTON > </button >

Этот элемент позволяет создавать кнопки так же, как и элемент INPUT. Но, в отли чие от последнего, он является контейнером (имеет конечный тег). Это означает, что содержимое элемента может быть достаточно сложным, например, комбина цией текста и графики (рис. 4.8):

<BUTTON name="^имя" value="submit" type="submit">
7~e/<cr<IMG згс="Файл. gif" alt="Коментарий"></button>

Атрибут type может принимать следующие значения:

  • button — кнопка, щелчок на которой вызывает запрограммированную разработ чиком реакцию;
  • submit — кнопка, подтверждающая, что форма заполнена;
  • reset — кнопка для очистки формы.

Стандартные атрибуты: accesskey, disabled, tabindex, name, value, id, class, lang, dir, title, style, атрибуты событий.

<FIELDSET> <LEGEND> </legend> </fieldset>

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

<FIELDSET>
<LEGEND>3aголовок rpynnb/</legend>
Имя: <INPUT name="ifflya2" type="text">
Фамилия: <INPUT name="familiya2" type="text"XBR>
Телефон: <INPUT name="telefon2" type="text"><BR>
Текст подсказки
</fieldset>

С помощью элемента FIELOSET несколько элементов объединяются: пользователь видит их заключенными в рамку (рис. 4.9). Внутри группы элементы формы ис пользуются обычным способом.

Элемент LEGEND позволяет создать заголовок группы. Поскольку этот элемент яв ляется контейнером, в нем можно размещать другие элементы HTML. Например заголовок группы можно составить из двух строк, если использовать тег <BR>. В этом случае размер шрифта заголовка целесообразно уменьшить.

С помощью атрибута a l i g n можно регулировать положение заголовка:

  • top — заголовок сверху (как показано на рис. 4.9);
  • bottom — заголовок внизу (что не всегда удается реализовать);
  • left — заголовок вверху и слева (значение по умолчанию);
  • right — заголовок вверху и справа.

Стандартные атрибуты элемента LEGEND: accesskey, id, class, lang, d i r , style, title, атрибуты событий.