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

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>

我正在使用一张图片代替提交按钮。当用户点击登录图片时，如何提交登录凭证信息？

- nectar

Answer 1

你可以使用一个图像提交按钮：

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

- Darin Dimitrov

---

没错，这是最好的方法。顺便提一下：有些服务器端语言有不同的方法来获取按钮是否被按下，通常是通过鼠标单击的X和Y坐标。因此，如果需要，请查看您选择的语言的文档。 - Amadiere

如何在图像上插入按钮名称？ - Prinston J

这对于简单的表单提交非常有效，但如果您需要图片携带一个值（以确定点击了哪个图像/按钮），那么在火狐浏览器中您就会遇到麻烦 - 您必须使用带有背景的按钮 :-(这段话意思是，虽然使用图片来提交表单很方便，但是如果你需要知道用户点击了哪张图片，那么在火狐浏览器中这种方法就不行了。此时，我们需要用一个带有背景的按钮来实现相同的功能。 - schmoopy

@ClarkKent - 是的，完全正确。 - user1110562

它可能没有值，但它有一个名称。而且这个名称将会在火狐浏览器、谷歌浏览器和IE浏览器中出现，并在结尾处添加“_x”。不幸的是，“_x”和“_y”的值将是坐标而不是实际值。然而：如果你需要一个值，在一个匹配的隐藏字段中提供一个值，并根据哪个“_x”字段存在来获取它。未被点击的图像名称将不会被提交或出现在POST数组中。 - TheSatinKnight

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

- Jahmic

---

这仍然会显示图像按钮样式，当您想要仅显示图像作为按钮时并不理想。 - Shimmy Weitzhandler

@Shimmy - 默认按钮样式对我来说不是问题，但我已经更新了我的答案，包括如何删除默认按钮样式。 - James John McGuire 'Jahmic'

Answer 3

您还可以使用第二个图像来模拟按钮被按下的效果。只需在输入图像之前在 HTML 中添加“pressed” 按钮图像即可：

<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 在悬停时更改“未按下”图像的不透明度：

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

我会为此页面上的蓝色“GO”按钮使用它。

- bcintegrity

Answer 4

这可能有帮助

<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

- Vishal Gupta

Answer 5

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

这是它的工作代码。

- Vishal Biradar

Answer 6

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

- john