come pulsante di invio dell'input del modulo?

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> 

Sto utilizzando un'immagine al posto di un pulsante di invio. Come posso inviare i dettagli di accesso quando l'utente fa clic sull'immagine di accesso come fa un pulsante di invio?

Answer 1

È possibile usare un image submit button:

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

Answer 2

tardi alla conversazione ...

Ma, perché non utilizzare i CSS? In questo modo è possibile mantenere il pulsante come un tipo di conferma:

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

funziona come un fascino.

Answer 3

È inoltre possibile utilizzare una seconda immagine per dare l'effetto di un pulsante premuto. Basta aggiungere l'immagine del pulsante "premuto" nel HTML l'immagine in ingresso prima:

<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;"/> 

E utilizzare CSS per cambiare l'opacità dell'immagine "pressata" al passaggio del mouse:

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

Io lo uso per il "GO" pulsante blu sul this page

Answer 4

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

Questo è il codice di lavoro per esso.

Answer 5

Imposta il pulsante di invio sull'immagine principale che stai utilizzando. Quindi i tag del modulo verrebbero prima di tutto, quindi il pulsante di invio, che è la tua unica immagine in modo che l'immagine sia il tuo modulo di immagine cliccabile. Quindi assicurati di inserire tutto ciò che stai passando prima del codice del pulsante di invio.