düğme resmi?

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> 

Gönderme düğmesinin yerine bir görüntü kullanıyorum. Gönderme düğmesinin yaptığı gibi kullanıcı giriş resmini tıkladığında giriş ayrıntılarını nasıl gönderebilirim?

Şunları kullanabilirsiniz

Answer 1

bir image submit button:

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

Answer 2

Geç konuşmaya ...

Ama, neden olmasın css kullanmak? Bu şekilde düğmeyi bir gönderim türü olarak tutabilirsiniz:

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

Bir çekicilik gibi çalışır.

Answer 3

Bir düğmeye basmanın etkisini vermek için ikinci bir görüntü de kullanabilirsiniz.

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

Ve Üzerine giderek "basılmamış" saydamlığını değiştirmek için CSS kullanın: Sadece giriş görüntüsünün önce HTML yılında "basılı" düğmesi resim eklemek ı için kullanmak

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

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> 

Bu mavi "GO" butonuna bunun için çalışma kodudur.

Answer 5

Gönder düğmesinin kullandığınız ana resmi oluşturmasını sağlayın. Böylece form etiketleri ilk önce gelir ve tek resmin olan düğmeyi gönderir, böylece görüntü tıklanabilir görüntü formunuzdur. Ardından, gönder düğmesini tıklamadan önce ne yazdığınıza dikkat edin.