超链接中的提交按钮

Question

超链接中的提交按钮

3

<!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 验证器，它是合法的。

当用户点击提交按钮时会发生什么？这种设置是否会导致不同的浏览器做任何它们想做的事情，还是有明确的规则来指定预期的行为？像这样做是否有用处？

- Richard JP Le Guen

3个回答

3

行为在不同浏览器中不一致。 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中禁止使用它的原因。

- Alohci

+1：很好，我甚至没有想到要检查那个。现在的问题是，jQuery是否能够在各种浏览器上规范化这种行为？John Resig在周围吗？ :) - Milimetric

1

@Milimetric - 如果JavaScript被禁用，jQuery就无法修复任何问题。 - Richard JP Le Guen

@Richard - 当然，我是在延续我的回答思路（请参见下面的jsfiddle）。 - Milimetric

1

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

尝试将相同的代码作为HTML5运行。HTML5定义通过给出错误来纠正了这个问题：

元素输入不得出现为a元素的后代。

这是因为您正在同一位置显示两个按钮，因此哪个按钮操作应优先考虑？本质上，您正在向用户隐藏一个按钮操作，这与根本没有第二个按钮一样好。

关于这方面的更多信息，请参见HTML：标记语言参考。

- graham

它确实经过验证。有趣的是，他们在HTML5中解决了这个问题...但你的第一个观点，即它不是有效的HTML，是不正确的。 - Richard JP Le Guen

我认为这仍然应该被视为有效，因为如果您填充了锚点，那么您仍然可以单击它以及内部的按钮。 - shanethehat

这取决于您如何解释指南，http://www.w3.org/TR/html401/struct/links.html#h-12.2.2，规定嵌套链接是非法的，这个例子可以被视为违反规定（只是未被添加到XHTML验证器算法中）。 - graham

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Milimetric · Accepted Answer

所以这里是答案：它可能无法在HTML5中验证，但可以在HTML 5以下版本中验证，但我仍然很好奇会发生什么。结果是相当合乎逻辑的。按钮事件先触发，然后冒泡到链接事件。随后链接事件触发。您可以在此处进行操作：http://jsfiddle.net/yEUM2/。在IE8、FF4、Chrome 10中的表现相同。