type="image" 和 type="submit" 的区别？答案

【问题标题】：Differences between type="image" and type="submit"?type="image" 和 type="submit" 的区别？
【发布时间】：2010-01-23 09:33:25
【问题描述】：

（此问题与this question有关）

我有一个简单的表格：

<html>
<head>
</head>
<body>
    <form name="aspnetForm" method="post" action="http://www.startupseeds.com/Default.aspx">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="..." />
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCALMyNWrBQKoz5H1CALlmOb9DgKmz6HzAwKf8bOXCQKC7qLKAwK5kNvVAQKk7amsA53tGBGr+Ji7LTI0eYkvquMZrF/g" />
        <input name="ctl00$Login1$tbEmail" type="text" />
        <input name="ctl00$Login1$tbPassword" type="password" />

        <input type="image" name="ctl00$Login1$ibLogin" />
    </form>
</body>
</html>

当我改变这个时：

<input type="image" name="ctl00$Login1$ibLogin" />

到这里：

<input type="submit" name="ctl00$Login1$ibLogin" />

...它不起作用。这段代码的唯一区别是type="submit" 而不是type="image"。我什至不知道它们之间存在差异（在 http 中的键/值中） - 我怎样才能让“提交”工作？

谢谢。

【问题讨论】：

您是否在此表单中使用了任何 javascript？也许是为了验证？
不工作时怎么办？
只是出于好奇，你为什么不想要图像？他们都提交表格，所以如果你想要一张图片，我认为'type=image'会是最好的。如果您不想要图像，那么您不应该在 ASP.NET 中使用 ImageButton。（我假设 ctl00$Login1$ibLogin 是 ImageButton 类型？）
我没有以这种形式使用 javascript。并且 type="image" 提交到 default.aspx 连接，而 type="submit" 只是提交到登录表单...
您在哪里更改输入类型，在客户端还是在服务器上？

标签： html http forms

【解决方案1】：

不同的是：

<input type="image" name="ctl00$Login1$ibLogin" />

将产生两个表单字段：ctl00$Login1$ibLogin.x 和 ctl00$Login1$ibLogin.y，以指示点击了图像的哪一部分，尽管您的标记中没有图像。

来自17.4.1 Control types created with INPUT 的HTML 4.01 Specification：

图片

创建一个图形submit button。的价值 src 属性指定 URI 将装饰的图像按钮。出于可访问性的原因，作者应通过以下方式为图像提供alternate text alt 属性。

当使用指针设备时点击图片，表格是提交和点击坐标传递给服务器。 x 值为从左起以pixels 测量图像的 y 值图像顶部的像素。这提交的数据包括name.x=x-value 和 name.y=y-value 其中“name”是 name 属性的值，以及 x-value 和 y-value 是 x 和 y 坐标值。

【讨论】：

...这在 ASP.NET 中失败了，因为它不希望返回这些参数名称。为了解决这个问题，只需使用带有 CSS 背景图像的input type="submit"。您显然也不需要图像映射，而只需一个带有背景图像的按钮。
@BalusC：ASP.NET 不能处理图像映射吗？还是有一些明确的机制最终使用usemap？
我应该不那么一般。我实际上是指表单操作背后的代码。
我添加了两个隐藏输入 ctl00$Login1$ibLogin.x 和 ctl00$Login1$ibLogin.y，现在可以使用了！谢谢！

【解决方案2】：

我怀疑你想要这样的 asp.net 页面：

<form id="form1" runat="server" action="http://www.startupseeds.com/Default.aspx">
<div>
    <asp:TextBox ID="tbTextBox" runat="server" />
    <asp:TextBox ID="tbPassWord" runat="server" TextMode="Password" />
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>

但是，是否允许这种 http-post 操作取决于您的目标站点。

【讨论】：

【解决方案3】：

您的后端代码很可能正在检查是否存在ibLogin.x 或ibLogin.y POST 参数，这些参数在您单击<input type="image"> 时发送并表示单击的坐标。另一方面，<input type="submit"> 将发布 ibLogin 参数。

【讨论】：

【解决方案4】：

需要指向图片url的src属性...

<input type="image" src="image_url" name="ctl00$Login1$ibLogin" />

编辑：http://www.w3schools.com/TAGS/att_input_type.asp

将图像定义为提交按钮。

src 和 alt 属性是必需的与。

【讨论】：

【解决方案5】：

除非您知道样式表，否则使用创建的提交按钮是一个看起来很单调的灰色实体。而通过放置 input type=image 代替 input type=submit 您可以放置一个图像代替默认提交按钮。如图所示

【讨论】：