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

Question

This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 8 years ago.
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?

Answer 1

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>

Answer 2

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.

Answer 3

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;
}