web-dev-qa-db-fra.com

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

<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?

htmlforms
56
nectar

Vous pouvez utiliser un bouton image submit :

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

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.

34
Jahmic

Vous pouvez également utiliser une seconde image pour donner l’effet d’une pression sur un bouton. Ajoutez simplement l'image du bouton "pressé" dans la 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

1
bcintegrity
<div class="container-fluid login-container">
    <div class="row">
        <form (ngSubmit)="login('da')">
            <div class="col-md-4">
                    <div class="login-text">
                        Login
                    </div>
                    <div class="form-signin">
                            <input type="text" class="form-control" placeholder="Email" required>
                            <input type="password" class="form-control" placeholder="Password" required>
                    </div>
            </div>
            <div class="col-md-4">
                <div class="login-go-div">
                    <input type="image" src="../../../assets/images/svg/login-go-initial.svg" class="login-go"
                         onmouseover="this.src='../../../assets/images/svg/login-go.svg'"
                         onmouseout="this.src='../../../assets/images/svg/login-go-initial.svg'"/>
                </div>
            </div>
        </form>
    </div>
</div>

Ceci est le code de travail pour cela.

0
Vishal Biradar

Faites du bouton d'envoi l'image principale que vous utilisez. Ainsi, les balises de formulaire viendraient en premier, puis le bouton d'envoi, qui est votre seule image, de sorte que l'image est votre forme d'image sur laquelle vous pouvez cliquer. Ensuite, assurez-vous de mettre ce que vous passez avant le code du bouton d'envoi.

0
john

Cela pourrait être utile

<form action="myform.cgi"> 
 <input type="file" name="fileupload" value="fileupload" id="fileupload">
 <label for="fileupload"> Select a file to upload</label> 
 <br>
 <input type="image" src="/wp-content/uploads/sendform.png" alt="Submit" width="100"> </form>

En savoir plus: https://html.com/input-type-image/#ixzz5KD3sJxSp

0
Vishal Gupta