кнопка изображение как форма ввод отправить кнопку?

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

Поздний разговор ...

Но, почему бы не использовать CSS? Таким образом, вы можете оставить кнопку в виде подачи:

<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 изменить непрозрачность «непрессованной» изображение на парении:

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

Я использую его для синий «GO» кнопку на 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> 

это рабочий код для него.

Answer 5

Сделать кнопку отправки основным изображением, которое вы используете. Таким образом, теги формы будут первыми, а затем отправьте кнопку, которая является вашим единственным изображением, так что изображение является вашей формой кликабельного изображения. Затем просто поставьте все, что вы передаете, перед кодом кнопки отправки.