Wiki-учебник по веб-технологиям: HTML/Формы2 ...

Главная | Каталог |
1 2

Флажки


Флажки (type=checkbox) используются, когда необходимо, чтобы пользователь выбрал один или несколько вариантов из ограниченного числа вариантов выбора.

Флажки в форме не зависят друг от друга, их можно установить или сбросить в любой комбинации. Для каждого флажка необходимо задать свое уникальное имя при помощи атрибута name. Создание двух флажков с одним именем не вызовет ошибки при отображении формы, но не позволит сценарию обработки на сервере корректно обработать передаваемые с формы данные.

<html>
<body>
<form>
В этом году я собираюсь приобрести:
<br>
<input type="checkbox" name="computer">
Компьютер
<br>
<input type="checkbox" name="notebook">
Ноутбук
<br>
<input type="checkbox" name="printer">
Принтер
<br>
<input type="checkbox" name="scanner">
Сканер
</form>
</body>
</html>


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

<html>
<body>
<form>
В этом году я собираюсь приобрести:
<br>
<input type="checkbox" name="computer" checked="checked">
Компьютер
<br>
<input type="checkbox" name="notebook">
Ноутбук
<br>
<input type="checkbox" name="printer">
Принтер
<br>
<input type="checkbox" name="scanner" checked="checked">
Сканер
</form>
</body>
</html>


В данном примере по умолчанию выбраны флажки «Компьютер» и «Сканер»:

При отправке данных формы с флажками на сервер выбранным флажкам присваивается значение по умолчанию “on”. Как правило, этого достаточно для корректной обработки данных, но в некоторых случаях удобнее задать каждому флажку свое значение при помощи атрибута value.

<input type="checkbox" name="printer" value="Принтер">

Командные кнопки


Командная кнопка отправки (type=submit) используется для выполнения пересылки данных формы на сервер. Метод отправки и адрес файла, обрабатывающего полученную информацию задаются в теге <form> при помощи атрибутов method и action. Командная кнопка сброса (type=reset) возвращает форму к исходному состоянию (очищает форму). При этом данные не передаются.

В следующем примере показана форма поиска с двумя кнопками отправки и сброса.

<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Найти:
<input type="text" name="search" size=25>
<br>
<input type="submit">
<input type="reset">
</form>
</body>
</html>


Если ввести в текстовое поле какие-то символы и нажать кнопку «Подача запроса», то введенная информация будет послана на страницу с именем “html_form_action.asp”. При нажатии на кнопку «Сброс» текстовое поле очистится.

Надписи на кнопках «Подача запроса» и «Сброс» установлены по умолчанию. Для их изменения необходимо использовать атрибут value.

Кроме кнопок отправки и сброса существует также возможность добавлять пользовательские кнопки (type=button), которые могут использоваться для выполнения процедур (скриптов) непосредственно на Web-странице.

Поле выбора файла


Поле выбора файла (type=file) создает поле для выбора файла, который будет загружен на сервер вместе с информацией формы. Рядом с полем ввода отображается командная кнопка «Обзор…", открывающая стандартное диалоговое окно выбора файла.

<html>
<body>
<form>
Прикрепить файл:
<br>
<input type="file" size="50">
</form>
</body>
</html>


Для поля выбора файла по аналогии с текстовым полем можно использовать атрибуты size, maxlength, value.

Списки выбора


Списки выбора бывают двух типов: раскрывающиеся списки (выпадающие меню) и списки с множественным выбором. Независимо от типов списков описываются они одинаково с помощью пары тегов <select> </select>. Отдельные элементы списка задаются с использованием тега <option>. Тип списка определяется при помощи атрибутов тега <select>.

Атрибут name задает имя поля для отправки выбранных пунктов списка на сервер.

Атрибут multiple разрешает множественный выбор. Атрибут size определяет, какое количество пунктов списка будет одновременно отображено на экране. При этом, если атрибут multiple не задан и size=1, то на экране отображается раскрывающийся список, если же задан атрибут Multiple или значение size больше 1, то список отображается развернутым.

Раскрывающийся список выбора


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

В следующем примере создан простой раскрывающийся список выбора ноутбука по производителю.

<html>
<body>
<form>
Выбор ноутбука по производителю:
<select name="notebook">
<option value="acer">Acer
<option value="asus">Asus
<option value="compaq">Compaq
<option value="hp">HP
<option value="sony">Sony
<option value="toshiba">Toshiba
</select>
</form>
</body>
</html>


Необходимо заметить, что по умолчанию выбирается первое значение из списка.

При помощи атрибута selected тега <option> это значение можно изменить.

Следующий пример показывает раскрывающийся список выбора размера экрана ноутбука с предварительно установленным значением “15.4”.

<html>
<body>
<form>
Выбор размера экрана ноутбука
<select name="tft">
<option value="tft-12">12"
<option value="tft-13">13"
<option value="tft-14">14"
<option value="tft-15">15"
<option value="tft-15-4" selected="selected">15.4"
<option value="tft-17">17"
</select>
</form>

Текстовая область


В отличие от текстового поля <input type=text> текстовая область позволяет вводить многострочный текст большого объема. Такие области часто используются при вводе сообщений, комментариев.

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

В следующем примере создана текстовая область с предварительно введенным текстом.

<html>
<body>
<textarea rows="7" cols="30">

В данном примере мы создали текстовую область с шириной в 30 символов и высотой в 7 строк.

Заданное значение высоты не ограничивает общий объем вводимого текста, а влияет только на размер отображаемой на экране текстовой области.

Для просмотра всего текста необходимо воспользоваться полосой прокрутки.
</textarea>
</body>
</html>

Теги форм


ТегОписание
<form>Определяет форму для ввода пользователя
<input> Определяет поле ввода
<textarea> Определяет текстовую область (элемент управления для ввода многострочного текста)
<label>Определяет метку для элемента управления
<fieldset>Определяет набор полей
<legend> Определяет заглавие для набора полей
<select> Определяет список выбора (раскрывающееся поле)
<optgroup> Определяет группу вариантов выбора
<option> Определяет вариант в раскрывающемся поле
<button> Определяет кнопку
<isindex> Не рекомендуется. Используйте вместо этого <input>

1 2