<input type="image">

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

Элементы <input type="image"> не принимают атрибуты value. Путь к отображаемому изображению указывается в атрибуте src.

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

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

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

Функционально, атрибут alt элемента <input type="image"> работает так же, как атрибут alt для элементов <img>.

Строка, указывающая URL, на который нужно отправить данные. Это имеет приоритет над атрибутом action у элемента формы <form>, содержащего элемент <input>.

Этот атрибут также доступен для элементов <input type="submit"> и <button>.

Строка, определяющая метод кодирования, используемый при отправке данных формы на сервер. Разрешены три значения:

application/x-www-form-urlencoded

Это значение по умолчанию. Данные формы отправляются как строка после кодирования текста с использованием алгоритма, такого как encodeURI().

multipart/form-data

Использует API FormData для управления данными, что позволяет отправлять файлы на сервер. Вы обязательно должны использовать этот тип кодирования, если ваша форма включает элементы <input> типа type file (<input type="file">).

text/plain

Обычный текст; полезен в основном для отладки, чтобы вы могли легко увидеть данные, которые будут отправлены.

Если задан, значение атрибута formenctype переопределяет атрибут action владеющей формы.

Этот атрибут также доступен для элементов <input type="submit"> и <button>.

Строка, указывающая HTTP-метод, используемый для отправки данных формы; это значение переопределяет любой атрибут method, заданный в владеющей форме. Разрешенные значения:

get

URL формируется путем добавления символа вопроса ("?") к URL, заданному атрибутом formaction или action, затем добавляются закодированные данные формы в соответствии с formenctype или атрибутом формы enctype. Этот URL отправляется на сервер с помощью запроса HTTP get. Этот метод хорошо подходит для простых форм, содержащих только символы ASCII и не имеющих побочных эффектов. Это значение по умолчанию.

post

Данные формы включаются в тело запроса, отправленного на URL, заданный атрибутом formaction или action, с помощью HTTP-запроса post. Этот метод поддерживает сложные данные и вложения файлов.

dialog

Этот метод используется для указания того, что кнопка закрывает диалоговое окно, с которым связан ввод, и не передает данные формы вообще.

Этот атрибут также доступен для элементов <input type="submit"> и <button>.

Булевый атрибут, который, если присутствует, указывает, что форма не должна проверяться перед отправкой на сервер. Это переопределяет значение атрибута novalidate в владеющей форме.

Этот атрибут также доступен для элементов <input type="submit"> и <button>.

Строка, которая указывает имя или ключевое слово, указывающее, где отобразить ответ после отправки формы. Строка должна быть именем **контекста просмотра** (то есть вкладкой, окном или <iframe>. Заданное здесь значение переопределяет любой целевой параметр, заданный атрибутом target у формы <form>, содержащей этот элемент ввода.

В дополнение к фактическим именам вкладок, окон или встроенных фреймов, можно использовать несколько специальных ключевых слов:

_self

Загружает ответ в тот же контекст просмотра, что и форма. Это заменит текущий документ полученными данными. Это значение по умолчанию, если оно не указано.

_blank

Загружает ответ в новый, безымянный, контекст просмотра. Обычно это новая вкладка в том же окне, что и текущий документ, но может отличаться в зависимости от конфигурации пользователя агента.

_parent

Загружает ответ в родительский контекст просмотра текущего. Если родительского контекста нет, это работает так же, как _self.

_top

Загружает ответ в верхний контекст просмотра; это контекст просмотра, который является верхним предком текущего контекста. Если текущий контекст является верхним, это работает так же, как _self.

Этот атрибут также доступен для элементов <input type="submit"> и <button>.

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

Строка, определяющая URL-адрес файла изображения для отображения графической кнопки отправки. При взаимодействии пользователя с изображением элемент обрабатывается как любая другая кнопка отправки.

Число, обозначающее ширину изображения в пикселях CSS.

Следующий атрибут был определен HTML 4 для элементов ввода image, но не был реализован во всех браузерах и с тех пор устарел.

Если usemap указан, он должен быть именем элемента карты изображений, <map>, который определяет карту изображений для использования с изображением. Это использование устарело; следует перейти к использованию элемента <img>, если нужно использовать карты изображений.

Элемент <input type="image"> — это элемент замещения (элемент, содержимое которого не генерируется и не управляется напрямую слоем CSS), который ведет себя очень похоже на обычный элемент <img>, но обладает возможностями кнопки отправки.

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

<input
  id="image"
  type="image"
  width="100"
  height="30"
  alt="Login"
  src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" />

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

Элементы <input type="image"> — например, обычные кнопки отправки — могут принимать ряд атрибутов, которые переопределяют стандартное поведение формы:

formaction

URI программы, которая обрабатывает информацию, отправленную элементом ввода; переопределяет атрибут action формы, к которой принадлежит элемент.

formenctype

Указывает тип содержимого, используемого для отправки формы на сервер. Возможные значения:

• application/x-www-form-urlencoded: Значение по умолчанию, если атрибут не указан.
• text/plain.

Если этот атрибут указан, он переопределяет атрибут enctype формы, к которой принадлежит элемент.

formmethod

Указывает HTTP-метод, который браузер использует для отправки формы. Возможные значения:

• post: Данные из формы включаются в тело формы и отправляются на сервер.
• get: Данные из формы добавляются к URI атрибута form, с «?» в качестве разделителя, и полученный URI отправляется на сервер. Используйте этот метод, когда форма не имеет побочных эффектов и содержит только символы ASCII.

При указании этого атрибута он переопределяет атрибут method формы, к которой принадлежит элемент.

formnovalidate

Булевый атрибут, указывающий, что форма не должна проверяться при отправке. Если этот атрибут указан, он переопределяет атрибут novalidate формы, к которой принадлежит элемент.

formtarget

Имя или ключевое слово, указывающее, где отобразить ответ, полученный после отправки формы. Это имя или ключевое слово для контекста просмотра (например, вкладки, окна или фрейма). Если этот атрибут указан, он переопределяет атрибут target формы, к которой принадлежит элемент. Следующие ключевые слова имеют специальное значение:

• _self: Загрузить ответ в тот же контекст просмотра, что и текущий. Это значение по умолчанию, если атрибут не указан.
• _blank: Загрузить ответ в новый неопределённый контекст просмотра.
• _parent: Загрузить ответ в родительский контекст просмотра текущего. Если родителя нет, этот вариант ведет себя так же, как _self.
• _top: Загрузить ответ в верхнеуровневый контекст просмотра (то есть контекст просмотра, который является предком текущего и не имеет родителя). Если родителя нет, этот вариант ведет себя так же, как _self.

При отправке формы с помощью кнопки, созданной с помощью <input type="image">, браузер автоматически отправляет на сервер две дополнительные точки данных — x и y . Вы можете увидеть это в действии в нашем примере координат X Y.

При нажатии на изображение для отправки формы вы увидите, как данные добавляются к URL в качестве параметров, например ?x=52&y=55. Если элемент ввода изображения имеет атрибут name, то помните, что указанное имя добавляется в префикс к каждому атрибуту, поэтому если name равно position, возвращаемые координаты будут отформатированы в URL как ?position.x=52&position.y=55. Это, конечно, относится и ко всем другим атрибутам.

Это координаты X и Y изображения, на которое был наведён курсор для отправки формы, где (0,0) — верхний левый угол изображения и значение по умолчанию в случае отправки без нажатия на изображение. Эти координаты могут быть полезны, когда положение нажатия на изображение имеет значение, например, у вас есть карта, которая при нажатии отправляет координаты нажатия на сервер. Серверная сторона кода определяет, какая область была нажата, и возвращает информацию о близлежащих местах.

В нашем примере мы могли бы написать серверный код, который определяет, какой цвет был нажат по координатам, отправленным на сервер, и подсчитывает количество голосов за каждый цвет.

Вы можете использовать свойство object-position для настройки позиционирования изображения внутри фрейма элемента <input> , а свойство object-fit — для управления тем, как размер изображения изменяется для соответствия фрейму. Это позволяет задать фрейм для изображения с помощью атрибутов width и height для выделения места в макете, а затем настроить местоположение изображения в этом месте и способ (или необходимость) его масштабирования для заполнения этого места.

Следующий пример демонстрирует ту же кнопку, что и раньше, но в контексте типичной формы входа.

HTML

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="100" />
  </div>
</form>

CSS

И теперь немного простого CSS, чтобы основные элементы размещались более аккуратно:

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

В этом примере мы адаптируем предыдущий пример, чтобы выделить больше места для изображения, а затем настроить фактический размер и позиционирование изображения с помощью object-fit и object-position.

HTML

<form>
  <p>Login to your account</p>
  <div>
    <label for="userId">User ID</label>
    <input type="text" id="userId" name="userId" />
  </div>
  <div>
    <label for="pwd">Password</label>
    <input type="password" id="pwd" name="pwd" />
  </div>
  <div>
    <input
      id="image"
      type="image"
      src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"
      alt="Login"
      width="200"
      height="100" />
  </div>
</form>

CSS

div {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 70px;
  text-align: right;
  padding-right: 10px;
}

#image {
  object-position: right top;
  object-fit: contain;
  background-color: #ddd;
}

Здесь object-position настроен на отрисовку изображения в верхнем правом углу элемента, в то время как object-fit установлено в contain, что указывает на то, что изображение должно быть отображено в максимальном размере, который поместится в рамку элемента без изменения его соотношения сторон. Обратите внимание на видимый серый фон элемента, который всё ещё виден в области, не занятой изображением.

• <input> и интерфейс HTMLInputElement, который его реализует.
• Элемент HTML <img>
• Размещение и изменение размера изображения в рамках элемента <input>: object-position и object-fit
• Таблица совместимости свойств