我可以使用HTML5在<a>内embedded一个<button>元素吗?

我正在做以下事情:

<a href="www.stackoverflow.com"> <button disabled="disabled" >ABC</button> </a> 

这工作良好,但我得到一个HTML5validation错误,说“元素”button“不能嵌套元素的一个button”。

任何人都可以给我build议我应该做什么?

14 Solutions collect form web for “我可以使用HTML5在<a>内embedded一个<button>元素吗?”

,根据W3C的HTML5规范文档 ,它不是有效的HTML5:

内容模型: 透明 ,但不能有交互式内容后裔。

只要内部没有交互式内容(例如button或其他链接),a元素就可以环绕整个段落,列表,表格等等,甚至是整个部分。

换句话说,除了下面的内容外,你可以嵌套<a>任何元素:

  • <a>

  • <audio> (如果控件属性存在)

  • <button>

  • <details>

  • <embed>

  • <iframe>

  • <img> (如果usemap属性存在)

  • <input> (如果type属性不处于隐藏状态)

  • <keygen>

  • <label>

  • <menu> (如果type属性处于工具栏状态)

  • <object> (如果usemap属性存在)

  • <select>

  • <textarea>

  • <video> (如果控件属性存在)


如果您试图将button链接到某处,请将该button包裹在<form>标签中,如下所示:

 <form style="display: inline" action="http://example.com/" method="get"> <button>Visit Website</button> </form> 

但是,如果您的<button>标签使用CSS样式化,并且看上去不像系统的小部件…请自己帮忙,为您的<a>标签创build一个新类并以相同的方式进行设置。

如果你使用的是Bootstrap 3 ,这个效果很好

 <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> <a href="#" class="btn btn-default btn-lg active" role="button">Link</a> 

没有。

以下解决scheme依赖于JavaScript。

 <button type="button" onclick="location.href='http://www.stackoverflow.com'">ABC</button> 

如果button被放置在一个现有的<form>并且method="post" ,那么确保该button具有属性type="button"否则button将提交POST操作。 通过这种方式,您可以使用包含GET和POST操作button的混合的<form>

如果这是有效的,这将是非常奇怪的,我希望它是无效的。 在另一个可点击元素内部有一个可点击的元素是什么意思? 这是一个button,还是一个链接?

我刚刚跳进同样的问题,我解决了它代替'button'标签'span'标签。 在我的情况下,我使用引导。 这是它的样子:

 <a href="#register"> <span class="btn btn-default btn-lg"> Subscribe </span> </a> 

另一种select是使用button的onclick属性:

 <button disabled="disabled" onClick="location.href='www.stackoverflow.com'" >ABC</button> 

这个工作,但是,用户不会看到hover上显示的链接,因为如果它是在元素内部。

你可以添加一个类到button,并把一些脚本redirect。

我这样做:

 <button class='buttonClass'>button name</button> <script> $(".buttonClass').click(function(){ window.location.href = "http://stackoverflow.com"; }); </script> 

为什么不..你也可以在图片上embedded图片

 <FORM method = "POST" action = "https://stackoverflow.com"> <button type="submit" name="Submit"> <img src="img/Att_hack.png" alt="Text"> </button> </FORM> 

在链接中embeddedbutton元素在HTML5中是非法的。

更好的使用默认的CSS和:active(pressed)状态:

 body{background-color:#F0F0F0} /* JUST TO MAKE THE BORDER STAND OUT */ a.Button{padding:.1em .4em;color:#0000D0;background-color:#E0E0E0;font:normal 80% sans-serif;font-weight:700;border:2px #606060 solid;text-decoration:none} a.Button:not(:active){border-left-color:#FFFFFF;border-top-color:#FFFFFF} a.Button:active{border-right-color:#FFFFFF;border-bottom-color:#FFFFFF} 
 <p><a class="Button" href="www.stackoverflow.com">Click me<a> 

在这里解释和工作的解决scheme: 如何:与onclick JavaScript的另一个div内的onclick

通过在内部点击处理程序中执行此脚本:

  if (!e) var e = window.event; e.cancelBubble = true; if (e.stopPropagation) e.stopPropagation(); 

这些天,即使规范不允许它,“似乎”仍然工作embedded一个<a href...><button ...></a>标签,FWIW …

我尝试你的JavaScript解决scheme,但是,为了工作,我需要插入e.preventDefault(); 在我的JavaScriptfunction。

在这里我的代码。

再见

  <!-- Add your HTML !--> <a id="id_primary_link" href="my_primary_link.php"> <button onclick="my_trick_function('my_secondary_link.php')"> </a> <!-- Add your javascript function !--> <script> function my_trick_function(secondary_link){ $('#id_primary_link').click(function(e) { e.preventDefault(); window.location.replace(secondary_link); }); } </script> 

使用button内的formaction属性

PS! 它只适用于你的buttontypes=“提交”

 <button type="submit" formaction="www.youraddress.com">Submit</button> 
 <a href="index.html"> <button type="button">Submit</button> </a> 
  • 设置自定义HTML5必填字段validation消息
  • 字体面未加载
  • jQuery的附加不工作与SVG元素?
  • 引导3模态火灾并导致页面左移/浏览器滚动条问题
  • HTML5本地存储中的项目何时到期?
  • 占位符在IE9中
  • 将HTML5应用程序作为桌面应用程序分发
  • 你能在iPad上自动播放HTML5video吗?
  • 如何创build一个在Bootstrap 3中也可以扩展的响应式图像
  • 如何正确alignmentdiv元素?
  • 我应该为JavaScript源文件映射文件使用哪种MIMEtypes?