Значение image
Синтаксис
<input type="image" src="..." alt="...">
Описание
Тип image (от англ. "image" ‒ «изображение») создаёт графическую кнопку отправки данных формы либо карту изображения.
Внешний вид
Задаётся изображением.
‒ пример внешнего вида графической кнопки отправки;
‒ фокус;
‒ наведение курсора;
‒ активация.
Примечание
С помощью атрибута «name» из графической кнопки можно сделать «серверную карту-изображения».
Поддержка браузерами
Спецификация
| Верс. | Раздел | |
|---|---|---|
| HTML | ||
| 2.0 | Image Pixel: INPUT TYPE=IMAGE | Перевод |
| 3.2 | INPUT text fields, radio buttons, check boxes, ... | |
| 4.01 | 17.4.1 Control types created with INPUT DTD: Transitional
Strict
Frameset
|
|
| 5.0 | 4.10.5.1.16 Image Button state (type=image) | |
| 5.1 | 4.10.5.1.19. Image Button state (type=image) | |
| XHTML | ||
| 1.0 | Extensible HyperText Markup Language DTD: Transitional
Strict
Frameset
|
|
| 1.1 | Extensible HyperText Markup Language | |
Сопутствующие атрибуты
- align
- Устанавливает выравнивание графической кнопки.
- alt
- Указывает альтернативный текст, описывающий изображение (кнопку).
Примечание: Альтернативный текст предназначен для не графических web-браузеров. Данный текст так же может быть использован графическими браузерами в случаях, когда web-браузер не может найти указанное изображение.
src="" alt="Альтернативный текст" - autofocus
- Автоматческая фокусировка на графической кнопке после полной загрузки страницы.
- disabled
- Блокировка графической кнопки.
disabled="disabled" - form
- Присоединение графической кнопки к форме.
- formaction
- Задаёт URL-адреса обработчика формы.
- formenctype
- Устанавливает способ кодирования данных отправляемых на сервер.
- formmethod
- Определяет HTTP-метод передачи данных на сервер.
- formnovalidate
- Отменяет проверку данных формы перед отправкой на сервер.
- formtarget
- Указывает фрейм или окно в которое будет загружен ответ сервера.
- height
- Задаёт высоту графической кнопки.
- name
- Присваивает имя графической кнопке.
Примечание: Если графическая кнопка имеет атрибут «
name», то она может выступать в качестве серверной карты-изображения. При нажатии на такую кнопку, будет сгененрирована пара значений, отправляемая на сервер (совместно с данными формы):- «
<значение_name>.x=<координата_X>» ‒ значение координаты «X», которое рассчитывается в пикселях от левой границы графической кнопки до места нажатия; - «
<значение_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, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
<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>