This is for an "Add to basket" control for which one of my colleagues has designed a nice graphic. Obviously it should generate a post request, which a simple hyperlink isn't going to do. Amazon achieves it using an image input. But what are the pros and cons of <input type="image" src="atb.png" alt="Add to Basket" /> versus <button type="submit"><img src="atb.png" alt="Add to Basket" /></button> (and using CSS to control the appearance)? I guess it boils down to these questions: Do all browsers, graphical and non-graphical, succeed in their duty to make image inputs keyboard-accessible? (Or, in the case of keyboardless devices, make them accessible by whatever the means of input is?) What browsers are there that don't support <button> ? What other advantages/disadvantages are there of each? Are there any other possible approaches with their own advantages (besides forgetting it and just using a plain submit)?

Reputation: 4044

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

This is for an "Add to basket" control for which one of my colleagues has designed a nice graphic. Obviously it should generate a post request, which a simple hyperlink isn't going to do.

Amazon achieves it using an image input. But what are the pros and cons of

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

versus

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

(and using CSS to control the appearance)?

I guess it boils down to these questions:

Do all browsers, graphical and non-graphical, succeed in their duty to make image inputs keyboard-accessible? (Or, in the case of keyboardless devices, make them accessible by whatever the means of input is?)
What browsers are there that don't support <button>?
What other advantages/disadvantages are there of each?
Are there any other possible approaches with their own advantages (besides forgetting it and just using a plain submit)?

Upvotes: 10

Answers (3)

Paulo Scardine

Reputation: 77251

From MDN:

When you submit a form using a button created with <input type="image">, two extra data points are submitted to the server automatically by the browser — x and y.

So one difference is that the input[type=image] transmits the coordinates of the pixel you clicked. It is 2019 and button is well supported so personally I use it unless I really need x, y - lets say, if the image is a map and I want to know where the user clicked in the map.

Upvotes: 0

Clive Paterson

Reputation: 789

Input type="Image" supports the Disabled attribute and the browser will Grey out the image for you. With Type=Button you'd have to provide an alternate grey image.

Upvotes: 1

edeverett

Reputation: 8218

They should be equivalent. For styling purposes, I find button tags are more flexible if you change things in the future.

But: IE has a bug/feature where the value of a button or input is set to equal the innerHTML. This can cause problems if your server side code needs this to be a particular value.

Unless you need the additional styling flexibility of <button> go with <input type="image"> so you don't need to deal with IE's quirks.

Upvotes: 2

&lt;button&gt; versus &lt;input type=&quot;image&quot;&gt;

Answers (3)

Related Questions

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