button image as form input submit 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 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?

score 133 · Accepted Answer · answered Aug 01 '10 at 10:17

133

You could use an image submit button:

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

answered Aug 01 '10 at 10:17

Darin Dimitrov

1,023,142
271
3,287
2,928

Yep. This is the best way. A side note to this: some serverside languages have different ways of getting at whether the button was pressed, normally via the X & Y coords of the mouse click. So have a nosey at the documentation on your language of choice (if you need this) – Amadiere Aug 01 '10 at 10:24
How to insert button name on the image? – Prinston J Jan 08 '13 at 11:10
11

This works great for a simple form submit, but if you need the image to carry a value (to determine which image/button was clicked) then you will be out of luck in FireFox - you will have to use a button with a background :-( – schmoopy Mar 26 '13 at 23:19
@ClarkKent - Yes exactly. – user1110562 Jan 28 '15 at 21:38
It may not have a value, but it has a name. And that name will appear in firefux, chram, and internet exploder with "_x" added to the end. Unfortunately, the value for _x and _y will be coordinates rather than an actual value. However: If you need a value, provide one in a hidden field with a matching name and grab it based on which "_x" field is present. Unclicked images names will not be submitted or present in the POST array. – TheSatinKnight Sep 15 '20 at 17:28

James John McGuire 'Jahmic' · Answer 2 · 2019-05-06T13:13:19.703

38

Late to the conversation...

But, why not use css? That way you can keep the button as a submit type.

html:

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

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

edited May 06 '19 at 13:13

answered Jul 19 '13 at 04:11

James John McGuire 'Jahmic'

11,728
11
67
78

That will still show the image button style, not ideal when you want to show only an image as a button. – Shimmy Weitzhandler May 06 '19 at 04:30
1

@Shimmy - The default button style wasn't an issue for me, but I've updated my answer to include how to remove the default button style. – James John McGuire 'Jahmic' May 06 '19 at 13:14

score 1 · Answer 3 · answered Jul 30 '14 at 20:26

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:

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

score 1 · Answer 4 · answered Jul 03 '18 at 16:29

This might be helpful

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

Read more: https://html.com/input-type-image/#ixzz5KD3sJxSp

score 0 · Answer 5 · answered Aug 15 '17 at 11:12

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

score 0 · Answer 6 · answered Aug 24 '17 at 02:04

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.

button image as form input submit button?

6 Answers6

Linked

Related