Техника Web-дизайна для студента

Создание форм средствами HTML

Формы размещаются в документе с помощью метки <form>...</form>. Метка <form> является контейнером, внутри которого могут размещаться другие метки, предназначенные для создания конкретных элементов.

Метка <input> предназначена для размещения внутри формы элементов нескольких типов. Для указания типа выбранного элемента в метке <input> используется параметр type, который может принимать следующие значения:

□ type=text — создается однострочное текстовое поле, предна­значенное для ввода или вывода информации. В этом случае в метке <input> можно использовать дополнительные пара­метры:

• MAXLENGTH="значение" — МаКСИМЭЛЬНОе КОЛИЧССТВО СИМВОЛОВ в строке (по умолчанию не ограничивается);

• size= "значение" — максимальное количество отображаемых символов;

• VALUE="значение" — начальное содержимое текстового поля;

• name= "значение" — имя элемента;

О type=password — однострочное текстовое поле, аналогичное предыдущему, но предназначенное для ввода пароля. Отли­чие состоит в том, что все вводимые символы отображаются it * it •

О type=file — поле для ввода И MCI 1 и файла, который необхо­димо переслать вместе с формой. Справа от строки будет до­бавлена кнопка Brows (Обзор) для поиска и выбора файла. Дополнительные параметры:

• maxlength="значение" — максимальная длина пути к файлу;

• size= "значение" — максимальное количество отображаемых символов;

• name= "значение" — имя элемента;

О TYPE=HIDDEN — СКрЫТОС TCKCTOISOC 1Ю.1С. Содержимое ПОЛЯ I1C

Демонстрируется браузером и не может быть изменено поль­зователем. Оно пересылается на сервер вместе с формой и может быть обработано серверной программой. Дополни­тельные параметры:

• VALUE="значение " — СОДерЖИМОе ПОЛЯ;

• name= "значение" — имя элемента;

О type=checkbox — поле для установки "флажка". В качестве дополнительных параметров можно использовать:

• value="текст" — текст, который будет передай. cc. iп фла­жок установлен;

• checked — этому параметру не присваивается какого-либо значения, но при его наличии элемент появится в окне браузера с уже установленным флажком;

• name= "значение" — имя элемента;

О type=radio — создается элемент переключателя, существу­ющий в составе группы. Для объединения в группу все эле­менты должны иметь одинаковые имена, которые указывают­ся в параметре name. Дополнительные параметры:

• VALUE="текст" — ТеКСТ, КОТОрЫЙ буДСТ Передай. СС. П1 ВЫ­бран данный элемент,

• checked — при наличии этого параметра, элемент появит­ся в окне браузера уже выбранным;

О type=submit — кнопка передачи данных. После ее нажатия осуществляется пересылка всех данных формы, а именно имен элементов, заданных в параметрах name и текстов, за­данных в параметрах value. Дополнительные параметры:

• VALUE="надпись" — позволяет ИЗМеНИТЬ НЭДПИСЬ 1Ш КПОИКС.

• name="hm3" — в случае использования этого параметра имя кнопки будет отправлено вместе с другими данными, но обычно этого не требуется;

□ type=image — в качестве кнопки SUBMIT будет использова­но графическое изображение, т. е. щелчок по изображению в окне браузера приведет к отправке формы по назначению. Дополнительные параметры:

• зес="имя" — имя файла рисунка;

• alt="текст" — текст, появляющийся в виде всплывающей подсказки;

Допускается использование и других параметров метки <img> (см. главу J);

О type=reset — кнопка сброса. При ее нажатии отменяются все сделанные установки. Дополнительный параметр value позволяет изменить надпись на кнопке;

О type=button — простая кнопка. Дополнительные параметры:

• value="значение" — надпись па кнопке:

• NAME= "значение" — ИМЯ кнопки.

Метка <select>...</select> предназначена для создания списка, из которого можно выбрать одно или несколько значений. Па­раметры метки <SELECT>:

О name="значение" — имя элемента;

О SIZE="значение" — число одновременно видимых элементов. При значении size меньшем, чем число элементов списка, для перемещения по списку будет отображаться полоса прокрутки;

О multiple — при установке этого параметра из списка можно выделить сразу несколько элементов. В окне браузера эле­менты, идущие подряд, можно выделить, удерживая клавишу <Shift>, а в произвольном порядке — <Ctrl>.

Элементы списка задаются с помощью метки <option>...</option>, размещаемой внутри метки <select>. В метке <option> можно использовать параметр selected. Та­кой элемент списка в окне браузера будет отмечен как выбран­ный. Например:

<SELECT SIZE="1" NAME="count гу" multiple>

<0 PT I ON selected>I'lcnaHHH</OPTION>

<0 PT 1СМ>Аргентина < / 0 PT 10N>

<OPTION SELECTED>MapOKKO</0PTI0N>

</SELECT>

Метка <textarea>...< / textarea> создает поле для ввода многострочного текста. Параметры метки <textarea>:

О 1-1АМЕ="имя_элемента";

О ROWS="значение" — число видимых строк;

О COLS="значение" — число видимых символов в строке.

Текст, размещенный между метками <textarea>...</textarea>, будет начальным содержимым поля ввода.

Метка <label>...</label> позволяет создать подпись к элементу формы. Текст подписи должен располагаться между открыва­ющей и закрывающей меткой.

Метка <fieldset>...</fieldset> предназначена для объединения нескольких элементов формы в группу, вокруг которой создается рамка. В разрыв рамки можно вставить название группы, для чего используется метка <legend>...</legend>. Пример в листинге 6.1.

Листинг 6.1. Объединение нескольких элементов в группу

<html>

<head>

Ctitle-^Объединение в rpynny</title>

Cmeta http-equiv="Content-Type" content="text/html; charset=windows-1251">

</head>

<body>

<fieldset style="width:150">

<legend>ropoflCKoii транспорт</1едепс1>

<form name="forml" method="post" action="">

<input type="checkbox" name="chl" value="aBTo6yc"> <1аЬе1>Автобус</1аЬе1> <br>

<input type="checkbox" name="ch2" value="трамвай">

< 1 abe 1 >Трамвай< /1 abe 1 xb r >

<input type="checkbox" name="ch3" value="троллейбус">

< 1 abe 1 >Tpo ллейбу с < /1 abe 1 xb r >

<input type="checkbox" name="ch4" value="MeTpo">

<label>Meтро</label>

</form>

</fieldset>

</body>

</html>

Для изменения ширины рамки в метке <fieldset> используется параметр style и свойство каскадной таблицы стилей (CSS) width. Подробно о каскадных таблицах стилей и их свойствах будет рассказано в главе 7. Документ в окне браузера будет вы­глядеть как на рис. 6.1.