Элементы управления формы
Формы предоставляют в распоряжение пользователя несколько типов элементов управления. Некоторые из них представлены в таблице 3.1.
Таблица 3.1.
Внешний вид |
Название |
Назначение |
|
Текстовое поле
Флажок
Переключатель
Кнопка
Текстовое поле с прокруткой
Ниспадающее меню
|
Для ввода коротких текстовых сообщений
Для выбора одного из двух возможных значений независимо от других полей Для выбора одного из множества вариантов, сопоставленных группе переключателей Для инициирования определенных действий
Для ввода текста из нескольких строк
Для выбора одного значения из списка значений |
Для создания того или иного элемента управления в форме применяются соответствующие теги.
Тег input
Тег input служит для ввода данных различных типов. Тип данных, вид элемента и его свойства определяются значением атрибута type. В таблице 3.2 указаны значения, которые может принимать атрибут type.
Таблица 3.2
-
Тип элемента
Описание элемента
Текстовое поле
<input type="text">
Текстовое поле для ввода пароля
<input type="password">
Флажок
<input type="checkbox">
Переключатель
<input type="radio">
Кнопка Submit
<input type="submit">
Кнопка произволь-ного назначения
<input type="button">
Кроме рассмотренного атрибута type с тегом input могут использоваться следующие атрибуты:
name – для задания имени элемента управления, выступающего в роли переменной,
value – для задания значения, связанного с именем элемента,
size – для задания размера по ширине, измеряемого в символах,
checked – для указания того, что флажок или переключатель выбран по умолчанию.
Например, для создания в форме текстового поля шириной в 40 символов можно использовать следующее выражение:
<input name=”surname” type="text" size="40">
Тег textarea
В отличие от тега <input type="text"> пара тегов <textarea> и </textarea> позволяет вводить не одну строку, а несколько строк в текстовое окно, снабженное линейкой прокрутки. Кроме атрибута name рассматриваемый тег имеет атрибуты rows и cols, определяющие высоту и ширину текстовой области, измеряемую в символах.
Между парой тегов <textarea> и </textarea> можно поместить какой-либо текст по умолчанию. При необходимости текст по умолчанию заменяют на новый.
<textarea name= “address” cols="50" rows="5" >
Введите свой адрес, удалив данный текст.
</textarea>
Тег select
Пара тегов <select> и </select> используется для создания списка альтернатив в форме ниспадающего меню. Использование атрибута multiple позволяет выбрать более одной альтернативы. Каждый элемент списка указывается посредством тега <option>. Для выбора элемента списка по умолчанию используется тег <option selected>.
Следующий HTML-код позволяет выбрать из списка название факультета более одного раза:
< select name=”fak” multiple >
<option> учетно-финансовый
<option selected > менеджмента
<option> внешнеэкономической деятельности
<option> коммерции и маркетинга
</ select >
При этом по умолчанию будут выбран факультет менеджмента.