/html/input/type/image:> Графическая кнопка_

Значение image

Синтаксис

HTML
XHTML
<input type="image" src="..." alt="...">  

Описание

Тип image (от англ. "image" ‒ «изображение») создаёт графическую кнопку отправки данных формы либо карту изображения.

Внешний вид

Задаётся изображением.

  • Пример внешнего вида графической кнопки отправки ‒ пример внешнего вида графической кнопки отправки;
  • Пример внешнего вида графической кнопки отправки с фокусом ‒ фокус;
  • Пример внешнего вида графической кнопки отправки с наведённым на неё курсором ‒ наведение курсора;
  • Пример внешнего вида активированной графической кнопки отправки ‒ активация.

Примечание

С помощью атрибута «name» из графической кнопки можно сделать «серверную карту-изображения».


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация


Сопутствующие атрибуты

align
Устанавливает выравнивание графической кнопки.
alt
Указывает альтернативный текст, описывающий изображение (кнопку).

Примечание: Альтернативный текст предназначен для не графических web-браузеров. Данный текст так же может быть использован графическими браузерами в случаях, когда web-браузер не может найти указанное изображение.

Внешний вид графической отправки с отображением альтернативного текста src="" alt="Альтернативный текст"

autofocus
Автоматческая фокусировка на графической кнопке после полной загрузки страницы.
disabled
Блокировка графической кнопки.

Внешний вид заблокированной графической отправки disabled="disabled"

form
Присоединение графической кнопки к форме.
formaction
Задаёт URL-адреса обработчика формы.
formenctype
Устанавливает способ кодирования данных отправляемых на сервер.
formmethod
Определяет HTTP-метод передачи данных на сервер.
formnovalidate
Отменяет проверку данных формы перед отправкой на сервер.
formtarget
Указывает фрейм или окно в которое будет загружен ответ сервера.
height
Задаёт высоту графической кнопки.
name
Присваивает имя графической кнопке.

Примечание: Если графическая кнопка имеет атрибут «name», то она может выступать в качестве серверной карты-изображения. При нажатии на такую кнопку, будет сгененрирована пара значений, отправляемая на сервер (совместно с данными формы):

  1. «<значение_name>.x=<координата_X>» ‒ значение координаты «X», которое рассчитывается в пикселях от левой границы графической кнопки до места нажатия;
  2. «<значение_name>.y=<координата_Y>» ‒ значение координаты «Y», которое рассчитывается в пикселях от верхней границы графической кнопки до места нажатия.

для

<input type="image" src="..." alt="..." formaction="/handler.php" name="coord">

при нажатии на данную кнопку в координатах «x=15;y=24», будут сгенерированы следующие значения (при GET-методе передачи данных): «/handler.php?coord.x=15&coord.y=24».

src
Указывает URL-адрес изображения.
value
Указывает значение графической кнопки.

Примечание: Атрибут «value» должен быть опущен.

width
Задаёт ширину графической кнопки.
Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение image (input-type)</title>
</head>
<body>
<h1>Пример с графической кнопкой "type=image"</h1>
<form action="/examples/php-scripts/coords.php" method="get">
<p><input type="image" src="/examples/images/figures.png" name="coords" alt="Пример графической кнопки" style="background: #ededed;"></p>
</form>
</body>
</html>
Значение image (input-type)