बटन छवि फॉर्म इनपुट सबमिट बटन के रूप में?

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> 

मैं सबमिट बटन के स्थान पर एक छवि का उपयोग कर रहा हूं। जब उपयोगकर्ता लॉगिन छवि पर सबमिट बटन के रूप में क्लिक करता है तो मैं लॉगिन विवरण कैसे सबमिट कर सकता हूं?

Answer 1

आप इस्तेमाल कर सकते हैं एक image submit button:

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

Answer 2

बातचीत करने के लिए देर हो चुकी ...

लेकिन, क्यों सीएसएस का उपयोग नहीं? इस तरह आप बटन को सबमिट प्रकार के रूप में रख सकते हैं:

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

एक आकर्षण की तरह काम करता है।

Answer 3

आप दबाए गए बटन के प्रभाव को देने के लिए दूसरी छवि का भी उपयोग कर सकते हैं। बस इनपुट छवि से पहले HTML में "दबाया" बटन छवि जोड़:

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

और CSS का उपयोग हॉवर पर "unpressed" छवि की पारदर्शिता को बदलने के लिए: मैं के लिए इसका इस्तेमाल करते हैं

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

इस पर नीले "GO" बटन इसके लिए काम कर कोड है।

Answer 5

सबमिट करें मुख्य बटन जो आप उपयोग कर रहे हैं बटन सबमिट करें। तो फॉर्म टैग पहले आएंगे, फिर सबमिट करें बटन जो आपकी एकमात्र छवि है, इसलिए छवि आपके क्लिक करने योग्य छवि प्रपत्र है। फिर बस सबमिट बटन कोड से पहले जो कुछ भी आप गुजर रहे हैं उसे रखना सुनिश्चित करें।