button image as form input submit button?

Question

<form method="post" action="confirm_login_credentials.php">     <table>         <tr>             <td>User ID:</td>             <td><input type="text" id="uid"></td>         </tr>         <tr>             <td>Password:</td>             <td><input type="text" id="pass"></td>         </tr>         <tr>             <td colspan="2" align="right">                 <a href="#"><img src="images/login.jpg"></a>             </td>         </tr>     </table> </form> 

I am using an image in place of a submit button. How can I submit the login details when the user clicks on the login image as a submit button does?

Answer 1

You could use an image submit button:

<input type="image" src="images/login.jpg" alt="Submit Form" /> 

Answer 2

Late to the conversation...

But, why not use css? That way you can keep the button as a submit type.

html:

<input type="submit" value="go" /> 

css:

button, input[type="submit"] {     background:url(/images/submit.png) no-repeat;" } 

Works like a charm.

EDIT: If you want to remove the default button styles, you can use the following css:

button, input[type="submit"]{     color: inherit;     border: none;     padding: 0;     font: inherit;     cursor: pointer;     outline: inherit; } 

from this SO question