<input type="image"> значение атрибута

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

Попробуйте

<p>Sign in to your account:</p>

<div>
  <label for="userId">User ID</label>
  <input type="text" id="userId" name="userId" />
</div>

<input
  type="image"
  id="image"
  alt="Login"
  src="/shared-assets/images/examples/login-button.png" />

label {
  font-size: 0.8rem;
}

label,
input[type="image"] {
  margin-top: 1rem;
}

input[type="image"] {
  width: 80px;
}

Значение

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

Дополнительные атрибуты

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

alt

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

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

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

formaction

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

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

formenctype

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

application/x-www-form-urlencoded

Значение по умолчанию: отправляет данные формы в виде строки, предварительно выполняя процентное кодирование текста с помощью алгоритма, например encodeURI().

multipart/form-data

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

text/plain

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

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

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

formmethod

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

get

URL формируется следующим образом: сначала берётся URL, заданный атрибутом formaction или action, затем добавляется вопросительный знак («?»), а после него — данные формы, закодированные способом, описанным для formenctype или атрибута enctype формы. Затем этот URL отправляется на сервер с помощью HTTP-запроса get. Этот метод подходит для форм, содержащих только символы ASCII и не имеющих побочных эффектов. Это значение используется по умолчанию.

post

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

dialog

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

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

formnovalidate

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

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

formtarget

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

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

_self

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

_blank

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

_parent

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

_top

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

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

height

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

src

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

width

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

Устаревшие атрибуты

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

usemap

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

Использование элементов input типа image

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

Основные особенности элемента input типа image

Рассмотрим простой пример, в котором показаны все необходимые для использования возможности (Они работают точно так же, как и у элемента <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 программы, обрабатывающей данные, отправленные элементом input; переопределяет атрибут 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.

Использование координат x и y

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

При нажатии на изображение для отправки формы вы увидите, что данные добавляются к URL в виде параметров, например ?x=52&y=55. Если у элемента input типа image задан атрибут 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: #dddddd;
}

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

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

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