Главная страница   /   13.7. Использование элемента input для создания кнопок с изображениями и карт (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

13.7. Использование элемента 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 на отправку формы, содержащую элемент image input

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