表单之外的按钮 html 标签是否有效？

Are button html tags outside of a form valid?

提问by ChuckE

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?

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

回答by Jukka K. Korpela

A buttonelement is valid anywhere in the document body where text-level markup may appear. Such an element need not have any relationship to a formelement. 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 Validatorto check whether a document is valid.

一个button元素是文档正文文本地方级标记可能会出现有效的任何地方。这样的元素不需要与元素有任何关系form。目前权威参考是HTML 4.01 规范，正式规则在 DTD 中，但你可以走捷径，使用W3C Markup Validator来检查文档是否有效。

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

当不与表单关联时，button元素与元素没有太大区别span（而不是div，默认情况下是块级的），但button具有特殊的默认呈现。浏览器和辅助软件也可能被button视为特殊的，最安全的做法是button仅用于应该在点击时触发某些操作的元素。相反，这些元素通常最好使用button标记来表示，尽管您也可以通过其他方式（主要是图像或 CSS）创建视觉上类似按钮的元素。

Outside a form, a buttonelement has type=buttonas default (and that's normally the only sensible typefor 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.

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

To address clarifying questions in the comment below:

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

A button type=buttonelement 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 valueattribute, whereas buttonhas content that can be “rich” (with markup).

一个button type=button元素类似于input type=button; 区别在于后者没有内容，而是从value属性中获取按钮中显示的文本，而button具有可以“丰富”的内容（带标记）。

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 formallywrong with the idea.

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

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 buttonelement or the onclickattribute than to do things in JavaScript (and, for making an element look like a button, CSS). There is also the point that buttonand input type=buttoncreate 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 有事件属性，如果没有客户端脚本它们就不可能工作，而您可以将事件处理程序分配给 JavaScript 中的元素。但在早期，这是不可能的，即使在现在，使用button元素或onclick属性可能比在 JavaScript 中做事情更方便（并且，为了使元素看起来像按钮，CSS）。还有一点是button，input type=button为元素创建依赖于浏览器的外观，并且可能会争论说，对于大多数用户来说，任何具有浏览器默认按钮样式的样式都被视为按钮。

回答by Denys Séguret

Yes. Since a very long time.

是的。很长一段时间以来。

From whatwg.org:

来自whatwg.org：

Contexts in which this element can be used:

Where phrasing content is expected.

可以使用此元素的上下文：

预期的措辞内容。

In the era of ajax, most inputs aren't just send by submitting a form. And most buttons are just used to execute an action on click while using a recognizable widget.

在 ajax 时代，大多数输入不仅仅是通过提交表单来发送的。大多数按钮仅用于在使用可识别的小部件时执行单击操作。