image du bouton comme bouton de soumission de saisie de formulaire?

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>
 

J'utilise une image à la place d'un bouton d'envoi. Comment puis-je envoyer les informations de connexion lorsque l'utilisateur clique sur l'image de connexion comme le fait un bouton d'envoi?

Answer 1

Vous pouvez utiliser un bouton d'envoi d'image :

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

Answer 2

En retard à la conversation ...

Mais pourquoi ne pas utiliser css? De cette façon, vous pouvez conserver le bouton comme type de soumission:

 <input type="submit" value="go" style="background:url(/images/submit.png) no-repeat;" />
 

Fonctionne comme un charme.

Answer 3

Vous pouvez également utiliser une seconde image pour donner l’effet d’une pression sur un bouton. Il suffit d'ajouter l'image du bouton "pressé" dans les HTML avant l'image d'entrée:

 <img src="http://integritycontractingofva.com/images/go2.jpg" id="pressed"/>
<input id="unpressed" type="submit" value=" " style="background:url(http://integritycontractingofva.com/images/go1.jpg) no-repeat;border:none;"/>
 

Et utilisez CSS pour changer l'opacité de l'image "non pressée" en survol:

 #pressed, #unpressed{position:absolute; left:0px;}
#unpressed{opacity: 1; cursor: pointer;}
#unpressed:hover{opacity: 0;}
 

Je l'utilise pour le bouton bleu "GO" sur cette page