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>

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

Answer 1

您可以使用image submit button：

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

Answer 2

谈话的后期......

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

HTML：

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

的CSS：

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

像魅力一样。

编辑：如果要删除默认按钮样式，可以使用以下css：

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

来自SO question

Answer 3

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

并使用CSS来更改＆＃34;未压缩＆＃34;的不透明度悬停图片：

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

我将它用于蓝色＆＃34; GO＆＃34; this page

上的按钮

Answer 4

!!(main_frame.html =~ /Your credit card does not have any statements|No activity is found in your credit card/i)

这是它的工作代码。

Answer 5

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

Answer 6

这可能有帮助

<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

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

6 个答案: