表单取消按钮问题答案

【问题标题】：Form Cancel Button Issue表单取消按钮问题
【发布时间】：2012-11-23 00:51:12
【问题描述】：

我有一个移动网站的工作表单。我将取消按钮更改为按钮的图像样式，现在在移动浏览器中单击它时会弹出表单验证。关闭验证消息后，站点返回上一页。当用户单击取消按钮时，表单没有被验证，但是当我将类型从“按钮”切换到“图像”时，表单得到验证，我不知道为什么。

之前：

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

【问题讨论】：

你好像忘了问你的question!!!
@zucchini: 请用你的问题编辑你的问题:) 你可以删除你的评论
我认为“为什么”这个词是一个间接问题。

标签： asp.net html forms

【解决方案1】：

<input type="image" />

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：