Веб-формы — Работа с пользовательскими данными

Примечание. Тип image ввода также отображается как кнопка. Мы расскажем об этом позже.
Примечание. Вы можете найти примеры из этого раздела на GitHub как button-examples.html ( см. также вживую ).
Ниже вы можете найти примеры каждого типа кнопки, а также эквивалентного типа.

представлять на рассмотрение

This is a submit button



Скопировать в буфер обмена

перезагрузить

This is a reset button



Скопировать в буфер обмена

анонимный

This is an anonymous button



Скопировать в буфер обмена
Кнопки всегда ведут себя одинаково независимо от того, используете ли вы элемент или элемент. Однако, как видно из примеров, элементы позволяют использовать HTML в своем содержимом, которое вставляется между открывающим и закрывающим тегами. элементы, с другой стороны, являются пустыми элементами ; их отображаемое содержимое вставляется внутрь value атрибута, поэтому в качестве содержимого принимается только обычный текст.
В следующих примерах показаны типы ввода по умолчанию, сфокусированные и отключенные кнопки — в Firefox 71 и Safari 13 в macOS и Chrome 79 и Edge 18 в Windows 10.

Кнопка изображения

Элемент управления кнопки изображения отображается точно так же, как элемент, за исключением того, что когда пользователь нажимает на него, он ведет себя как кнопка отправки.
Кнопка изображения создается с использованием элемента, для атрибута которого type задано значение image. Этот элемент поддерживает точно такой же набор атрибутов, как и сам элемент, а также все атрибуты, поддерживаемые другими кнопками формы.

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

• 
  Ключ значения X — это значение атрибута, name за которым следует строка « .x ».
  
• 
  Ключ значения Y — это значение атрибута, name за которым следует строка « .y ».
  

Так, например, когда вы нажимаете на изображение с координатой (123, 456) и оно отправляется через get метод, вы увидите следующие значения, добавленные к URL-адресу:
http://foo.com?pos.x=123&pos.y=456
Это очень удобный способ построения «горячей карты». Как эти значения отправляются и извлекаются, подробно описано в статье Отправка данных формы .