3

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?

volume one
  • 6,800
  • 13
  • 67
  • 146
  • 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 Oct 06 '14 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 Oct 06 '14 at 14:49
  • 1
    I think using a background image with CSS is the best way to go – volume one Oct 06 '14 at 15:17

3 Answers3

6

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>
Edwin
  • 1,135
  • 2
  • 16
  • 24
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.

saleem ahmed
  • 326
  • 1
  • 5
  • 27
Steini
  • 2,753
  • 15
  • 24
1

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;
}
Arijit Mukherjee
  • 3,817
  • 2
  • 31
  • 51