在超链接提交按钮

我从来没有认为这是有效的标记把一个<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这一点，它验证。

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

来源

2011-04-12 Richard JP Le Guen

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

Milimetric答案可能是很好的JavaScript的，但考虑脱稿HTML会发生什么。

看到JS小提琴http://jsfiddle.net/PjtPZ/

在这里，我只是改变了问题的HTML，这样的链接导航的页面访问www.microsoft.com和形式提交到www.google.com。

点击在Firefox 4.0中的按钮，IE9或Opera 11和谷歌页面显示的一个。在Chrome 10.0或Safari 4.0中执行此操作，即可获得Microsoft页面。

这可能是为什么它在HTML5中被禁止。

来源

2011-04-12 21:43:32 Alohci

+1：很好，我甚至都没想过去检查一下。现在的问题是，jQuery是否跨浏览器规范了这种行为？约翰Resig是否在附近？ :) – Milimetric 2011-04-12 22:23:51

@Milimetric - 如果禁用JavaScript，jQuery无法修复任何内容。 – 2011-04-13 00:53:44

@理查德 - 当然，我从我的回答中继续思考（请参阅下面的jsfiddle）。 – Milimetric 2011-04-13 11:32:15

~~总之，它是无效的HTML。~~ 它可能不应该是有效的，正如理查德指出，有趣的是在HTML5

得到解决尝试运行相同的代码为HTML5。 HTML5的定义已通过给出错误来纠正此问题：

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

这是因为您在同一地点显示两个按钮，所以哪个按钮操作应该优先选择？从本质上讲，你隐藏了用户的一个按钮动作，就像没有第二个按钮一样。

有一个在HTML: The Markup Language Reference

来源

2011-04-12 16:58:59 graham

它虽然验证。有趣的是，他们已经在HTML5中解决了这个问题，但是......首先，它不是有效的HTML，这是不正确的。 – 2011-04-12 17:04:48

我想它应该仍然被认为是有效的，因为如果你填充锚点，那么你仍然可以点击它以及里面的按钮。 – shanethehat 2011-04-12 17:12:44

这取决于你如何解释指南，http://www.w3.org/TR/html401/struct/links.html#h-12.2.2，指出嵌套链接是非法的，这个例子可以看作是（只是没有添加到验证算法的XHTML） – graham 2011-04-13 09:50:19

因此，这里的答案:) 它可能不会在HTML5验证更多相关信息，它可以验证在HTML 5 <，但我仍然好奇，想看看发生了什么。事实证明这非常合乎逻辑。按钮事件首先触发，然后冒泡到链接事件。然后链接事件触发。你可以用它在这里玩：

http://jsfiddle.net/yEUM2/

它在IE8，FF4同样的事情，铬10

来源

2011-04-12 17:21:12 Milimetric

好的测试，一些额外的传播信息[Javascript - 事件顺序]（http：// www。quirksmode.org/js/events_order.html），首先在事件 – MikeM 2011-04-12 17:34:30

上通过jquery [stopPropagation（）]（http://api.jquery.com/event.stopPropagation/）方法了解到了这件事。在我的答案中看到反例。 – Alohci 2011-04-12 21:44:41

在超链接提交按钮

回答

相关问题