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?

Darin Dimitrov · Accepted Answer · 2010-08-01 10:17:38Z

134

You could use an image submit button:

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

answered Aug 1, 2010 at 10:17

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Amadiere Over a year ago

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)

Prinston J Over a year ago

How to insert button name on the image?

schmoopy Over a year ago

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

user1110562 Over a year ago

@ClarkKent - Yes exactly.

TheSatinKnight Over a year ago

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.

James John McGuire 'Jahmic' · Accepted Answer · 2019-05-06 13:13:19Z

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 6, 2019 at 13:13

answered Jul 19, 2013 at 4:11

James John McGuire 'Jahmic'

12.9k11 gold badges78 silver badges84 bronze badges

2 Comments

Shimmy Weitzhandler Over a year ago

That will still show the image button style, not ideal when you want to show only an image as a button.

James John McGuire 'Jahmic' Over a year ago

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

bcintegrity · Accepted Answer · 2014-07-30 20:26:11Z

1

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

answered Jul 30, 2014 at 20:26

bcintegrity

3132 silver badges11 bronze badges

Comments

Vishal Gupta · Accepted Answer · 2018-07-03 16:29:14Z

1

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

answered Jul 3, 2018 at 16:29

Vishal Gupta

112 bronze badges

Comments

Vishal Biradar · Accepted Answer · 2017-08-15 11:12:28Z

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

john · Accepted Answer · 2017-08-24 02:04:39Z

0

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.

answered Aug 24, 2017 at 2:04

john

1

Collectives™ on Stack Overflow

button image as form input submit button?

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related