Question

我绝不会认为将<input type="submit" />置于锚<a>中是有效的标记，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Submit input in a hyperlink</title>
</head>
<body>
    <form action="/form-submission" method="get">
        <a href="/hyperlink-click"><input type="submit" /></a>
    </form>
</body>
</html>

但奇怪的是，如果你将它提供给w3c validator，它就会验证。

当用户点击提交按钮时会发生什么？这种设置是不可预测的，不同的浏览器会做任何他们喜欢的事情，还是有明确的规则来规定预期的行为？做这样的事情会派上用场吗？

Answer 1

所以这是答案:) 它可能无法在HTML5中验证，它可以在HTML中验证＆lt; 5，但我仍然很想知道发生了什么。事实证明这很合乎逻辑。按钮事件首先触发，然后冒泡到链接事件。然后链接事件触发。你可以在这里玩：

http://jsfiddle.net/yEUM2/

它在IE8，FF4，Chrome 10中做同样的事情

Answer 2

浏览器之间的行为不一致。

Milimetric回答可能对javascript有好处，但请考虑使用无脚本的html会发生什么。

请参阅js fiddle http://jsfiddle.net/PjtPZ/

在这里，我刚刚更改了问题的html，以便链接将页面导航到www.microsoft.com，表单提交到www.google.com。

单击Firefox 4.0，IE9或Opera 11中的按钮，将显示Google页面。在Chrome 10.0或Safari 4.0中执行此操作即可获得Microsoft页面。

这可能是HTML5中不允许的原因。

Answer 3

~~简而言之，它不是有效的HTML。~~ 它可能不应该是有效的，正如理查德指出的那样，有趣的是它已在HTML5中得到解决

尝试运行与HTML5相同的代码。 HTML5定义通过提供错误来纠正此问题：

The element input must not appear as a descendant of the a element.

这是因为您在同一个地方显示两个按钮，哪个按钮操作应该优先？基本上你正在隐藏用户的一个按钮动作，这与没有第二个按钮一样好。

HTML: The Markup Language Reference

中有更多相关信息

在超链接中提交按钮

3 个答案: