表单之外的按钮 html 标签是否有效? [英] Are button html tags outside of a form valid?

问题描述

我刚刚注意到，在 soundcloud 中，轨道上的动作"按钮(例如，重新发布等)都是 html 按钮标签.此外，它们既不在表单内，也不绑定到 html5 表单，也不提交表单(它们显然是通过 javascript 处理的).这是有效的 HTML 吗?没有表单的按钮可以存在吗?或者这只是使这些按钮成为可点击的 div 吗?对于屏幕阅读器来说，这有多有效/无效?

I just noticed that, in soundcloud, the "action" buttons on a track (like, repost, etc...) are all html button tags. Moreover, they are neither inside a form nor they bind to a form a la html5 nor submit a form (they apparently are being handled through javascript). Is this valid HTML? Can a button exist without a form? Or does that just make these buttons plain clickable divs? And how valid/unvalid would that be for screenreaders?

推荐答案

button 元素在文档正文中可能出现文本级标记的任何位置都有效.这样的元素不需要与 form 元素有任何关系.目前权威参考是HTML 4.01规范，正式规则在DTD，但您可以走捷径并使用 W3C 标记验证器来检查文档是否有效.

A button element is valid anywhere in the document body where text-level markup may appear. Such an element need not have any relationship to a form element. The currently authoritative reference is the HTML 4.01 specification, and the formal rules are in the DTD, but you can take a shortcut and use the W3C Markup Validator to check whether a document is valid.

当不与表单关联时，button 元素与 span 元素没有太大区别(而不是 div，后者是块-level 默认)，但 button 有特殊的默认渲染.浏览器和辅助软件可能将 button 也视为特殊的，并且最安全的做法是仅将 button 用于应该触发某些操作的元素单击时.相反，这些元素通常最好使用 button 标记来表示，尽管您也可以通过其他方式(主要是图像或 CSS)创建视觉上类似按钮的元素.

When not associated with a form, a button element is not very different from a span element (rather than div, which is block-level by default), but button has special default rendering. Browsers and assistive software may treat button as otherwise special too, and it is safest to use button only for elements that are supposed to trigger some action when clicked on. Conversely, such elements are often best represented using button markup, though you can create visually button-like elements in other ways too (images or CSS, mostly).

在表单之外，button 元素将 type=button 作为默认值(这通常是它唯一合理的 type).这意味着它只能通过 JavaScript 产生效果.这不会以任何方式使其无效.但是，您可以考虑通过 JavaScript 生成这样的按钮，而不是将它们作为静态 HTML 内容，这样当脚本被禁用时，就不会有(有效但)令人困惑的按钮什么也不做.

Outside a form, a button element has type=button as default (and that’s normally the only sensible type for it then). This means that it can only have an effect via JavaScript. This does not make it invalid in any way. However, you may consider generating such buttons via JavaScript instead of having them as static HTML content, so that when scripting is disabled, there won’t be a (valid, but) confusing button that does nothing.

解决以下评论中的澄清问题:

To address clarifying questions in the comment below:

button type=button 元素类似于 input type=button；区别在于后者没有内容，而是从 value 属性中获取按钮中显示的文本，而 button 具有可以丰富"的内容(带标记).

A button type=button element is similar to input type=button; the difference is that the latter has no content but takes the text shown in the button from the value attribute, whereas button has content that can be "rich" (with markup).

对于任一元素，如果使用它们导致服务器操作(通常，通过 Ajax 调用)，那么我们确实可以询问页面在禁用 JavaScript 的情况下如何工作.但是这个问题可能无关紧要(也许该页面是一个无论如何都应该使用 JavaScript 运行的应用程序)，并且无论如何这个想法没有正式错误.

For either element, if using them causes a server action (typically, via an Ajax call), then we can indeed ask how the page works with JavaScript disabled. But this question might be irrelevant (perhaps the page is an application that is supposed to run with JavaScript anyway), and in any case there is nothing formally wrong with the idea.

它们为什么存在?为了作者方便和遗留原因，我会说.类似地，人们可能会问为什么 HTML 有事件属性，如果没有客户端脚本，它们就不可能工作，而您可以将事件处理程序分配给 JavaScript 中的元素.但在早期，这是不可能的，即使在现在，使用 button 元素或 onclick 属性可能比在 JavaScript 中做事更方便(并且，为了使元素看起来像按钮，CSS).还有一点是 button 和 input type=button 为元素创建了依赖于浏览器的外观，并且可能会争辩说，对于大多数用户来说，任何具有他的浏览器默认按钮样式被视为按钮.

Why do they exist? For author convenience and for legacy reasons, I would say. Similarly, one might ask why HTML has event attributes at all, when they cannot possibly work without client-side scripting and you can assign event handlers to elements in JavaScript. But in the early days, that was not possible, and even at present, it might be more convenient to use the button element or the onclick attribute than to do things in JavaScript (and, for making an element look like a button, CSS). There is also the point that button and input type=button create browser-dependent appearance for elements, and it might be argued that for most users, anything that has the style of his browser’s default style for buttons is perceived as a button.

这篇关于表单之外的按钮 html 标签是否有效?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！