Использование элемента input для создания кнопок с изображениями и карт
Тип image элемента input позволяет создавать кнопки, на которых показано изображении и при нажатии которых отправляется форма. Этот тип элемента input поддерживает дополнительные атрибуты, приведенные в таблице 13-14.
Таблица 13-14: Дополнительные атрибуты для типаimageэлементаinput
| Атрибут | Описание | Новый в HTML5 |
alt |
Предоставляет текстовое описание элемента. Это полезно для пользователей, которым требуются вспомогательные технологии. | Нет |
formaction |
Как и для элемента button, описанного в главе 12. |
Да |
formenctype |
Как и для элемента button, описанного в главе 12. |
Да |
formmethod |
Как и для элемента button, описанного в главе 12. |
Да |
formtarget |
Как и для элемента button, описанного в главе 12. |
Да |
formnovalidate |
Как и для элемента button, описанного в главе 12. |
Да |
height |
Определяет высоту изображения в пикселях (если этот атрибут не применяется, изображение будет представлено в своей обычной высоте). | Нет |
src |
Указывает URL изображения, которое должно быть отображено. | Нет |
width |
Определяет ширину изображения в пикселях (если этот атрибут не применяется, изображение будет представлено в своей обычной ширине). | Нет |
В листинге 13-16 показано, как используется тип image элемента input.
Листинг 13-16: Использование типаimageэлементаinput
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta name="author" content="Adam Freeman" />
<meta name="description" content="A simple example" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<form method="post" action="http://titan:8080/form">
<input type="hidden" name="recordID" value="1234" />
<p>
<label for="name">
Name:
<input value="Adam" id="name" name="name" />
</label>
</p>
<p>
<label for="password">
Password:
<input type="password" placeholder="Min 6 characters"
id="password" name="password" />
</label>
</p>
<p>
<label for="fave">
Favorite Fruit:
<input type="text" id="fave" name="fave" />
</label>
</p>
<input type="image" src="accept.png" name="submit" />
</form>
</body>
</html>На рисунке 13-21 вы можете увидеть, как браузер отображает этот тип элемента input.
Рисунок 13-21: Использование типаimageэлементаinput
Когда пользователь нажимает на изображение, браузер отправляет форму и включает туда два элемента данных, обозначающих элемент image input. Они представляют собой координаты х и у изображения, куда пользователь кликнул мышкой, относительно верхнего левого угла рисунка. Вы можете увидеть эти данные на рисунке 13-22, который показывает ответ скрипта Node.js после отправки формы, представленной на предыдущем рисунке.
Рисунок 13-22: Ответ Node.js на отправку формы, содержащую элементimageinput
Тот факт, что были переданы и координаты, обозначает, что вы можете использовать разные части изображения для различных ответов пользователю, в зависимости от того, куда на изображении он кликнул мышкой.
