Question

我有一个移动网站的工作表单。我将取消按钮更改为按钮的图像样式，现在在移动浏览器中单击它时会弹出表单验证。在解除验证消息后，站点返回上一页。当用户单击取消按钮时，表单未被验证，但当我将类型从“按钮”切换到“图像”时，表单得到验证，我无法找出原因。

在：

<pre>
    input type="button" onclick="history.back();" value="Cancel"
</pre>

后：

<pre>
    input type="image" onclick="history.back();"
    src="images/Mobile_Form_Button_01_Cancel.png"

</pre>

Answer 1

<input type="image" />

实际上是一个'提交'按钮作为图像。更多信息here (W3C Schools)。

要使其正常工作，请将其更改回<input type="button" />并使用CSS设置样式。

Answer 2

它发生的原因是在form元素内，input type=image充当特殊类型的提交按钮。这意味着默认情况下将进行任何脚本化或HTML定义的验证。在合同中，input type=button元素创建一个没有默认操作的按钮;任何行动都必须编写脚本。（这通常使它在静态HTML中成为一个糟糕的选择：当在浏览器中禁用脚本时，无论你点击多少，按钮都会在那里无所事事。）

有不同的方法可以避免这种情况。一种方法是在return false代码的末尾添加onclick，以防止默认操作。另一种方法是使用input type=button或button并根据您的偏好设置样式。另一个是只有img元素onclick属性（但最好由JavaScript生成）。

最好的选择是删除元素。从可用性的角度来看，您不应该复制浏览器功能 - 除非您正在编写HTML5应用程序而不是网页。

表单取消按钮问题

2 个答案: