Image of a button as a form input button?

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> 

I use an image instead of a submit button. How can I send login data when the user clicks on the login image as a submit button?

Answer 1

You can use the send image button:

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

Answer 2

Late to talk ...

But why not use CSS? This way you can save the button as a send type.

HTML:

 <input type="submit" value="go" /> 

CSS:

 button, input[type="submit"], input[type="reset"] { background:url(/images/submit.png) no-repeat;" } 

It works like a charm.

EDIT : If you want to remove the default button styles, you can use the following CSS:

 button, input[type="submit"], input[type="reset"] { color: inherit; border: none; padding: 0; font: inherit; cursor: pointer; outline: inherit; } 

from this SUCH question

Answer 3

You can also use the second image to give the effect of clicking a button. Just add the “pressed” button image in the HTML before the input image:

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

And use CSS to change the opacity of the "undead" image on hover:

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

I use it for the blue “GO” button on 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> 

This is the working code for it.

Answer 5

Make the submit button the main image that you are using. That way, the form tags will be the first, and then submit the button, which is your only image, so that the image is your clickable image form. Then just put everything you go in front of the submit button code.

Answer 6

It may be useful.

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

More details: https://html.com/input-type-image/#ixzz5KD3sJxSp