按钮图像作为表单输入提交按钮？

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

我使用图像代替提交按钮。当用户点击登录图像作为提交按钮时，如何提交登录详细信息？

6 个解决方案

#1

111

You could use an image submit button:

您可以使用图像提交按钮：

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

#2

Late to the conversation...

谈话的后期......

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

但是，为什么不使用CSS？这样您就可以将按钮保留为提交类型：

<input type="submit" value="go" style="background:url(/images/submit.png) no-repeat;" />

Works like a charm.

奇迹般有效。

#3

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:

您还可以使用第二个图像来显示按下按钮的效果。只需在输入图像之前在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;"/>

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

并使用CSS来改变悬停时“未压缩”图像的不透明度：

#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

我将它用于此页面上的蓝色“GO”按钮

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

这是它的工作代码。

#5

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.

将提交按钮设置为您正在使用的主图像。因此，表格标签将首先出现，然后提交按钮，这是您唯一的图像，因此图像是您可点击的图像形式。然后确保在提交按钮代码之前放置您传递的任何内容。

#6

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>

阅读更多：https：//html.com/input-type-image/#ixzz5KD3sJxSp

#1

111