<output>:输出元素

<output> HTML 元素是一个容器元素,站点或应用可以将计算结果或用户操作的结果注入其中。

¥The <output> HTML element is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.

属性

¥Attributes

该元素包括 全局属性

¥This element includes the global attributes.

for

其他元素的 id 以空格分隔的列表,指示这些元素为计算贡献了输入值(或以其他方式影响)。

form

将输出与其(其表单所有者)关联的 <form> 元素。该属性的值必须是同一文档中 <form>id。(如果未设置此属性,则 <output> 与其祖级 <form> 元素(如果有)相关联。)

此属性允许你在文档中的任何位置将 <output> 元素与 <form> 相关联,而不仅仅是在 <form> 内部。它还可以覆盖祖级 <form> 元素。

name

元素的名称。用于 form.elements API。

表单提交期间不会提交 <output> 值、名称和内容。

¥The <output> value, name, and contents are NOT submitted during form submission.

示例

¥Examples

在以下示例中,表单提供了一个滑块,其值的范围可以在 0100 之间,以及一个 <input> 元素,你可以在其中输入第二个数字。这两个数字相加,每当任何控件的值发生变化时,结果都会显示在 <output> 元素中。

¥In the following example, the form provides a slider whose value can range between 0 and 100, and an <input> element into which you can enter a second number. The two numbers are added together, and the result is displayed in the <output> element each time the value of any of the controls changes.

html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

结果

¥Result

无障碍问题

¥Accessibility concerns

许多浏览器将此元素实现为 aria-live 区域。因此,辅助技术将宣布其内部发布的 UI 交互的结果,而无需将焦点从产生这些结果的控件上移开。

¥Many browsers implement this element as an aria-live region. Assistive technology will thereby announce the results of UI interactions posted inside it without requiring that focus is switched away from the controls that produce those results.

技术总结

¥Technical summary

内容类别 流量内容措辞内容listedlabelableresettable 形式关联元素,可触及内容。
允许的内容 措辞内容.
标签遗漏 无,开始和结束标记都是强制性的。
允许的父级 任何接受 措辞内容 的元素。
隐式 ARIA 角色 status
允许的 ARIA 角色 任何
DOM 接口 HTMLOutputElement

规范

Specification
HTML Standard
# the-output-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility