< input > элементы типа image используются для создания графических кнопок отправки, т. е. кнопок отправки, которые принимают форму изображения, а не текста.

Атрибут alt предоставляет альтернативную строку для использования в качестве метки кнопки, если изображение не может быть показано (из-за ошибки, пользовательского агента , который не может или настроен не отображать изображения, или если пользователь использует устройство чтения с экрана). Если указано, это должна быть непустая строка, подходящая для метки кнопки.

Например, если у вас есть графическая кнопка, которая показывает изображение со значком и/или текстом изображения «Войти сейчас», вы также должны установить для alt атрибута что-то вроде Login Now.

Давайте рассмотрим базовый пример, который включает в себя все основные функции, которые вам нужно использовать (они работают точно так же, как и в < img > элементе):

Атрибут src используется для указания пути к изображению, которое вы хотите отобразить на кнопке.

Атрибут alt предоставляет замещающий текст для изображения, поэтому пользователи программ чтения с экрана могут лучше понять, для чего используется кнопка. Он также будет отображаться, если изображение не может быть показано по какой-либо причине (например, если путь указан с ошибкой). Если возможно, используйте текст, который соответствует метке, которую вы использовали бы, если бы использовали стандартную кнопку отправки.

Атрибуты width и height используются для указания ширины и высоты изображения в пикселях. Кнопка имеет тот же размер, что и изображение; если вам нужно, чтобы область нажатия кнопки была больше, чем изображение, вам нужно будет использовать CSS (например, padding ). Кроме того, если вы укажете только одно измерение, другое будет автоматически настроено так, чтобы изображение сохраняло исходное соотношение сторон.