Can I substitute a submit input element with an image to postback a form without using javascript?

Question

Hello,

I've seen buttons that have some nice shape. I downloaded a couple of them to try on my application. I was expecting to get an image to be used as background for my buttons and textboxes. But, The downloaded file contains 2 images and a script. It looks to me like those shaped controls are aimed at replacing the html buttons and textboxes.

If they are supposed to take the place of the regular buttons, how can I post a form with an image? With javascript that feasable. But, is it possible to get samething without javascript?

Thanks for helping

Answer 1

You can style buttons:

HTML:

<input type="submit" class="button" value="Go!"/>
<input type="button" class="button" value="Cancel!"/>

And CSS:

.button{
     background: #FFF url('images/button-bg.jpg') repeat-x;
     color: #000;
     font: 1.0em Tahoma;
     border: 1px solid #D4D4D4;
     cursor: pointer; /* Change cursor to 'hand' when hovering the button */
}
.button:hover{
     background: #EEE url('images/button-hover-bg.jpg') repeat-x;
     border: 1px solid #666;
}

Example of what the above style will get you:

Note that the text value of the buttons will still be shown, allowing your to keep your form accessible.

Such buttons retain their utility while being far more beautiful. Much like women with makeup.

More resources: http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

Answer 2

You can use the <input type="image"/> to do this:

<input type="image" src="your-fancy-button.png" alt="Submit"/>