button image as form input submit button

Question

lt form method  post  action  confirm login credentials php  gt       lt table gt           lt tr gt               lt td gt User ID  lt  td gt               lt td gt  lt input type  text  id  uid  gt  lt  td gt           lt  tr gt           lt tr gt               lt td gt Password  lt  td gt               lt td gt  lt input type  text  id  pass  gt  lt  td gt           lt  tr gt           lt tr gt               lt td colspan  2  align  right  gt                   lt a href     gt  lt img src  images login jpg  gt  lt  a gt               lt  td gt           lt  tr gt       lt  table gt   lt  form gt    I am using an image in place of a submit button  How can I submit the login details when the user clicks on the login image as a submit button does

User · Accepted Answer

You could use an image submit button    lt input type  image  src  images login jpg  alt  Submit Form    gt

User · Answer

lt div class  container-fluid login-container  gt       lt div class  row  gt           lt form  ngSubmit   login  da    gt               lt div class  col-md-4  gt                       lt div class  login-text  gt                          Login                      lt  div gt                       lt div class  form-signin  gt                               lt input type  text  class  form-control  placeholder  Email  required gt                               lt input type  password  class  form-control  placeholder  Password  required gt                       lt  div gt               lt  div gt               lt div class  col-md-4  gt                   lt div class  login-go-div  gt                       lt 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    gt                   lt  div gt               lt  div gt           lt  form gt       lt  div gt   lt  div gt    This is the working code for it

User · Answer

You can also use a second image to give the effect of a button being pressed  Just add the  pressed  button image in the HTML before the input image    lt img src  http   integritycontractingofva com images go2 jpg  id  pressed   gt   lt input id  unpressed  type  submit  value     style  background url http   integritycontractingofva com images go1 jpg  no-repeat border none    gt    And use CSS to change the opacity of the  unpressed  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

User · Answer

This might be helpful   lt form action  myform cgi  gt     lt input type  file  name  fileupload  value  fileupload  id  fileupload  gt    lt label for  fileupload  gt  Select a file to upload lt  label gt     lt br gt    lt input type  image  src   wp-content uploads sendform png  alt  Submit  width  100  gt   lt  form gt    Read more  https   html com input-type-image  ixzz5KD3sJxSp

User · Answer

Late to the conversation     But  why not use css   That way you can keep the button as a submit type   html    lt input type  submit  value  go    gt    css   button  input type  submit         background url  images submit png  no-repeat       Works like a charm   EDIT  If you want to remove the default button styles  you can use the following css   button  input type  submit        color  inherit      border  none      padding  0      font  inherit      cursor  pointer      outline  inherit      from this SO question

User · Answer

Make the submit button the main image you are using  So the form tags would come first then submit button which is your only image so the image is your clickable image form  Then just make sure to put whatever you are passing before the submit button code

[html] button image as form input submit button?

Examples related to html

Examples related to forms