Image for a submit button - which way is best? [duplicate]

Question

In order to use an image as a form's submit button, I have come across two ways and would like to know which one is correct/best-practice.

Version 1:

<button type="submit"> <img src="mybutton.jpg" alt="Submit" /> </button>

Version 2:

<input type="image" src="mybutton.jpg" border="0" alt="Submit" />

I personally feel that the first version is better because it makes semantic sense and has a type of "submit". In the second version its saying the input is of type "image" which doesn't mean much to me as a human.

Which one should I go with?

You can also use Javascript on an image onClick event to submit the form with this.submit(). This helps when you have a nonstandard image (it won't fit neatly into a button) you want to use. — Tim
– Tim, Commented Oct 6, 2014 at 14:48
I wouldn't prefer using images, ain't sure what you are trying to style your button like, but if your image contains a glyph then you can use web fonts, or if your button is fancy, you can achieve some designs using CSS — Mr. Alien
– Mr. Alien, Commented Oct 6, 2014 at 14:49
I think using a background image with CSS is the best way to go — volume one
– volume one, Commented Oct 6, 2014 at 15:17

Edwin · Accepted Answer · 2014-10-06 14:46:48Z

Personally I would set it as a background rather than an image inside the button. So you would get the following.

<button type="submit" class="styledButton></button> <style> .styledButton { background: url('mybutton.jpg') no-repeat; } </style>

saleem ahmed · Accepted Answer · 2014-10-06 15:10:56Z

That is just a matter of style, there is not really a "better" way, use the way you feel your code to be more clean with.

My personal opinion is that all form elements should be "<input>" because that feels more natural for me. I don't like it when things doing the same stuff (being form-elements in this case) looks different of having a different syntax, so I declared this to my personal standard.

However the most annoying thing is that an image, or <input type="image"> will not transfer name="" and value="" when submitting a form, that's why it is bad to use incase you have multiple "buttons" decorated as images in a form and you want to know which one was pressed.

In that case the best opinion is to make an <input type="submit"> and let it look like an image using CSS.

However, my statement for this question is: do it the way you feel best but keep it that way and don't switch around. Decide for one "standard" and use it always. Will make your code more strict and easier to read.

Arijit Mukherjee · Accepted Answer · 2014-10-06 14:54:15Z

I personally use CSS to apply an image to submit button

Reason behind this is : you don't need to write the same code everywhere, just calling the css class will be sufficient

Instead of above 2 versions mentioned by you.

Try This:

<div id="submitForm"> <input type="submit" value="Submit" name="submit"> </div>

CSS

div#submitForm input { background: url("mybutton.jpg") no-repeat scroll 0 0 transparent; color: #000000; cursor: pointer; font-weight: bold; height: 20px; padding-bottom: 2px; width: 75px; }

Collectives™ on Stack Overflow

Image for a submit button - which way is best? [duplicate]

3 Answers 3

1 Comment

Comments

2 Comments

Linked

Hot Network Questions