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

【问题标题】：button image as form input submit button?按钮图像作为表单输入提交按钮？
【发布时间】：2011-03-23 20:03:34
【问题描述】：

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

我正在使用图像代替提交按钮。当用户像提交按钮一样单击登录图像时，如何提交登录详细信息？

【问题讨论】：

标签： html forms

【解决方案1】：

你可以使用image submit button:

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

【讨论】：

是的。这是最好的方法。附带说明：一些服务器端语言有不同的方法来判断按钮是否被按下，通常是通过鼠标点击的 X 和 Y 坐标。因此，请注意有关您选择的语言的文档（如果您需要）
如何在图片上插入按钮名称？
这适用于简单的表单提交，但如果您需要图像携带值（以确定单击了哪个图像/按钮），那么您将在 FireFox 中不走运 - 您将拥有使用带背景的按钮 :-(
@ClarkKent - 没错。
它可能没有值，但它有一个名称。该名称将出现在 firefux、chram 和 internet exploder 中，并在末尾添加“_x”。不幸的是，_x 和 _y 的值将是坐标而不是实际值。但是：如果您需要一个值，请在隐藏字段中提供一个具有匹配名称的值，并根据存在的“_x”字段获取它。未点击的图像名称不会提交或出现在 POST 数组中。

【解决方案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

【讨论】：

这仍然会显示图像按钮样式，当您只想将图像显示为按钮时并不理想。
@Shimmy - 默认按钮样式对我来说不是问题，但我已经更新了我的答案，包括如何删除默认按钮样式。

【解决方案3】：

您还可以使用第二张图片来呈现按下按钮的效果。只需在输入图像前的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 更改悬停时“未按下”图像的不透明度：

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

我将它用于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>

这是它的工作代码。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案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>

【讨论】：