<button> против <input type = "image">

Question

Это элемент управления «Добавить в корзину», для которого один из моих коллег разработал красивую графику. Очевидно, он должен сгенерировать почтовый запрос, который не будет делать простая гиперссылка.

Amazon достигает этого с помощью ввода изображения. Но каковы плюсы и минусы

<input type="image" src="atb.png" alt="Add to Basket" />

против

<button type="submit"><img src="atb.png" alt="Add to Basket" /></button>

(и использовать CSS для управления внешним видом)?

Я думаю, это сводится к следующим вопросам:

• Все ли браузеры, графические и не графические, преуспели в выполнении своих обязанностей по обеспечению доступа к вводу изображений с клавиатуры? (Или, в случае устройств без клавиатуры, сделать их доступными с помощью любых средств ввода?)

• Какие браузеры не поддерживают <button>?

• Какие еще преимущества / недостатки есть у каждого?

• Существуют ли другие возможные подходы с их собственными преимуществами (помимо того, что вы забыли об этом и просто используете простую отправку)?

Answer 1

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

Но: В IE есть ошибка / функция, при которой значение кнопки или ввода устанавливается равным innerHTML. Это может вызвать проблемы, если ваш код на стороне сервера требует, чтобы это было определенное значение.

Если вам не нужна дополнительная гибкость стиля <button>, используйте <input type="image">, поэтому вам не нужно иметь дело с причудами IE.

Answer 2

от MDN:

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

Таким образом, одно отличие состоит в том, что input[type=image] передает координаты пикселя, который вы щелкнули. Это 2019, и button хорошо поддерживается, поэтому лично я использую его, если мне действительно не нужен x, y - скажем, если изображение является картой, и я хочу знать, где пользователь щелкнул по карте.

Answer 3

Input type = "Image" поддерживает атрибут Disabled, и браузер выделит вам изображение серым цветом. С помощью Type = Button вам нужно будет предоставить альтернативное серое изображение.