<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
在以下示例中,表单提供了一个滑块,其值的范围可以在 0
和 100
之间,以及一个 <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.
<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>
结果
无障碍问题
¥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.
技术总结
规范
Specification |
---|
HTML Standard # the-output-element |
浏览器兼容性
BCD tables only load in the browser
¥Browser compatibility