<button> и <input type = "image" >

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

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>?

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

  • Есть ли другие возможные подходы с их собственными преимуществами (помимо забывания и просто использования простого представления)?

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

Тип ввода = "Изображение" поддерживает атрибут "Отключено", и браузер будет выделен для вас серым. С помощью кнопки "Тип =" вы должны будете предоставить альтернативное серое изображение.