CODEWITHSUNDEEP
htmlcssformsuser-interface
spreadzz
spreadzz

Reputation: 278

input type image vs button with background-image

In a form which needs to have a image button which markup is better: To create a <input type="image"> and add the image as source, or create a button element and add the image as a background with CSS?

Until now I have used button with background-image as rarely seen <input type="image"> used . <button> is more friendly with mobile devices. But now I am thinking what if the image is deleted accidentally from the server? The button with the background-image would not be visible, but the input type image can uses the value as a fallback if the image is deleted.

Upvotes: 1

Views: 836

Answers (3)

F&#225;&#238;s&#224;l &#195;hm&#235;d
F&#225;&#238;s&#224;l &#195;hm&#235;d

Reputation: 21

You should try button with background. here is an example.

<button></button>
<style>
button{background:url(http://www.used-car.com.au/images/small%20green%20button.jpg);height:70px;width:70px}
</style>

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128836

The HTML5 spec's Image Button State documentation is a bit vague:

The input element represents either an image from which a user can select a coordinate and submit the form, or alternatively a button from which the user can submit the form.

I think the intended use of the type=image input element is for selecting co-ordinates on an image, however I guess over time this was misused and is now accepted as just an input element with an image background. However in both cases it does state that the intended purpose of this button is to submit a form.

So in short:

  1. If it isn't supposed to either submit a form or select co-ordinates on the image, use a <button> element;
  2. If it's intended effect is to allow a user to select co-ordinates on the image, use the <input> element;
  3. If it's intended effect is to submit a form, use either - this is a personal preference thing (I'd use a <button>, myself).

Upvotes: 2

melwyn pawar
melwyn pawar

Reputation: 1816

Creating a button and adding a background to it will give you more flexibility in styling it

Upvotes: 0

Related Questions