Графическая кнопка пересылки данных на Web-сервер

Элемент input со значением type="image" создает элемент в виде графического изображения. Щелчок мышью по изображению (графической кнопке) действует аналогично щелчку по кнопкеsubmit.

Для графической кнопки задаются следующие атрибуты:

· src (обязательный атрибут) – задает адрес изображения;

· name – задает имя кнопки;

· alt – задает текст для изображения, который выводится при загрузке изображения и в том случае, если загрузка изображения в Web-браузере отключена;

· usemap – ссылка на клиентскую карту ссылок (этот атрибут не работает в Internet Explorer и Safari);

· disabled (без значения) – если задан, изображение переводится в неактивное (отключенное) состояние и не реагирует на щелчок мышью.

Если на изображении элемента щелкнуть мышью и в Firefox и Opera не задан атрибут usemap, то координаты указателя мыши в виде имя-элемента. x= n & имя-элемента. y= m (где имя-элемента – значение атрибута name, а m и n – значения координат x и y) включаются Web-браузером в список атрибутов формы, посылаемых на сервер. Если атрибут name не задан, координаты передаются в виде x= n &y= m.

Если в Firefox и Opera задан атрибут usemap, то графическая кнопка обрабатывается как карта ссылок, в соответствии со ссылками для областей изображения, указанными в элементах area.

Для всех Web-браузеров для кнопки-изображения можно задать стили блоковой модели документа. Для Internet Explorer и Firefox можно дополнительно задать цвет фона.

Для графической кнопки в интерфейсе HTMLInputElement DOM2 HTML, помимо общих свойств элемента input, определены следующие свойства:

· src – значение атрибута src;

· name – значение атрибута name;

· alt – значение атрибута alt;

· usemap – значение атрибута usemap;

· disabled (false или true) – состояние графической кнопки (активное или неактивное);

· form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит графическая кнопка.

Пример 4.5.29. Использование графической кнопки передачи:

1. В документе HTML задана следующая форма:

<form action="https://localhost/Greeting.php"

id="imageForm">

<table>

<tr>

<td>Введите имя: </td>

<td><input type="text" name="login"

value="Иванов" id="login"/></td>

</tr><tr>

<td>Введите пароль: </td>

<td><input type="password" name="pass"

value="" id="pass"/></td>

</tr><tr>

<input type="image"

src="images/FormImageButton.png"

name="imgSubmit" id="imageButton"/></td>

</tr>

</table>

</form>

При вводе пароля в форме Web-страница примет следующий вид:

После нажатия графической кнопки поле адреса в Web-браузере примет следующий вид:

2. Если в Web-браузерах Firefox и Opera в предыдущем примере для элемента input добавить атрибут usemap="#callMap" и задать следующую карту ссылок:

<area shape="rect" coords="0,0,168,38"

href="javascript:formSend('userReg')"

alt="Регистрация"/>

<area shape="rect" coords="0,39,169,76"

href="javascript:formSend('userCheck')"

alt="Вход в систему"/>

</map>

то можно задавать переход на разные Web-страницы в зависимости от того, в верхней или нижней части изображения выполнен щелчок мыши. Это делается с помощью следующей функции:

function formSend(mode)

{

// Ошибок во входных данных нет

isError = false;

// Получение имени пользователя

// Получение пароля пользователя

pass = document.getElementById("pass").value;

// Если не задано имя пользователя

if(login == "")

{

// Во входных данных есть ошибки

isError = true;