4.2 Элементы пользовательского интерфейса
Элементы пользовательского интерфейса могут использоваться в HTML – документах как элементы формы (контейнера <form>), если предполагается передача содержащиеся в них данные на сервер, так и сами по себе, как элемент интерфейса.
Для задания элементов управления формы используется тег <INPUT>. С помощью него, можно создавать элементы различных типов: поля ввода данных, кнопки и переключатели и т.д. Тип элемента определяется атрибутомtype. Общие атрибуты тега <input>:
Кроме рассмотренных ранее, имеет следующие атрибуты:
name– имя (идентификатор) элемента. Обязательно если предполагается использовать элемент в составе формы для передачи значения атрибутаvalueна сервер;
disabled– делает элемент недоступным пользователю;
accesskey– определяет клавишу быстрого доступа к элементу (в сочетании с клавишей <Alt>);Например:<input type= "button" value="OK" accesskey="Y">;
tabindex– целое число, определяющее порядок перехода к элементу по клавиши <ТАВ>.
Рассмотрим подробнее элементы управления.
Текстовое поле ввода данных: type= text. Дополнительные атрибуты:
maxlength– максимальное количество вводимых символов;
size– ширина поля, выраженная в количестве одновременно видимых символов;
value– значение (содержимое поля).
Пример. Задать поле ввода имени. Максимальная длина имени 35 символов.
Ваше имя <INPUT TYPE="text" NAME="Name" SIZE="35">
Переключатель типа флажок: type= checkbox. Дополнительные атрибуты:
value– значение, ассоциированное с флажком;
сhecked– определяет, помечен ли заранее переключатель.
Пример. Задать форму выбора операционной системы, с отправкой данных скрипту обработки – "input.php". Ос Windows – выбрана по умолчанию.
<form method="post" action="input.php">
<p><b>С какими операционными системами вы знакомы?</b></p>
<p><input type="checkbox" name="option1" value="a1">Unix<Br>
<input type="checkbox" name="option2" value="a2" checked>Windows<Br>
<input type="checkbox" name="option3" value="a3">MacOS<Br>
<input type="checkbox" name="option4" value="a4">Linux<Br>
<input type="checkbox" name="option5" value="a5">DOS</p>
<p><input type="submit" value="Отправить"></p>
</form>
Переключатель выбора одного варианта: type = radio. Дополнительные атрибуты:
value– значение, ассоциированное с радиокнопкой;
сhecked– определяет, помечен ли заранее переключатель.
Пример. Задать форму выбора пола.
<form method="post" action="input.php">
<BR>Пол мужской<INPUT NAME="Пол" TYPE=radio VALUE="Мужской">
<BR>Пол женский<INPUT NAME="Пол" TYPE=radio VALUE="Женский">
<p><input type="submit" value="Отправить"></p>
</form>
Поле ввода имени файла, для отсылки на сервер: type=file. Атрибуты как у тестового поля. Поле содержит кнопку «Обзор» для открытия диалогового окна выбора файла.
Пример. Форма выбора файла для отсылки на сервер.
<form method="post" action="input.php">
Выберите файл <INPUT TYPE="file" NAME="Name" SIZE="35">
<p><input type="submit" value="Отправить"></p>
</form>
Поле ввода пароля: type=password. Обычное текстовое поле, в котором все вводимые символы отображаются как символ *. Атрибуты как у тестового поля.
Пример. Форма ввода пароля.
<form method="post" action="input.php">
Введите пароль (макс 6 символов)<INPUT TYPE="password" NAME="Name" SIZE="35" maxlength="6">
<p><input type="submit" value="Отправить"></p>
</form>
Задание кнопки: type=button. Дополнительные атрибуты:
value– надпись, отображаемая на кнопке. По умолчанию на кнопке нет надписи.
Пример. Задание кнопки
|
<INPUT TYPE=button VALUE="Нажми меня"> |
|
Кнопка отправки данных формы на сервер: type=submit.Дополнительные атрибуты:
value –строка, отображаемая на кнопке. По умолчанию на кнопке находится надпись «Подача запроса» или «Submit».
Пример. Задание кнопки отправки данных.
<form method="post" action="input.php">
Ваше имя <INPUT TYPE="text" NAME="Name" SIZE="35">
<INPUT TYPE=submit>
<INPUT TYPE=submit VALUE="Нажми меня">
</form>
Графическая кнопка отправки данных формы на сервер: type=image.При нажатии мышью по изображению, браузер дополнительно передает координаты точки клика на сервер. Дополнительные атрибуты:
src="URL"– адрес графического файла.
Пример. Задание графической кнопки отправки данных.
<form action="http://www.ya.ru/input.php">
Ваше имя <INPUT TYPE="text" NAME="Name" SIZE="35">
<INPUT TYPE=image src="pic.png" >
</form>
Строка передаваемая на сервер:
http://www.ya.ru/input.php?Name=lenon&x=65&y=18
Кнопка для сброса данных формы в первоначальное значение: type=reset.Дополнительные атрибуты:
value– строка, отображаемая на кнопке. По умолчанию на кнопке находится надпись «Сбросить» или «Reset».
Пример. Задание графической кнопки отправки данных.
<form action="input.php">
Ваше имя <INPUT TYPE="text" NAME="Name" SIZE="35">
<INPUT TYPE="reset">
<INPUT TYPE="reset" VALUE="Отмена">
</form>
Скрытое поле: type=hidden.Позволяет включить в отправляемую форму значения атрибутовNAMEиVALUE, которые пользователь изменить не может. Такие поля полезны для передачи специальных данных например идентификатора или даты заполнения формы.
Полный набор атрибутов элементов формы приведен на рисунке 4.1.
Рисунок 4.1 – Атрибутов элементов формы