files/zh-cn/web/html/element/output/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

---
title: <output>
slug: Web/HTML/Element/output
tags:
  - Element
  - HTML5
  - Web
translation_of: Web/HTML/Element/output
---
<p><strong>HTML <code>&lt;output&gt;</code> 标签</strong>表示计算或用户操作的结果。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/zh-CN/docs/HTML/Content_categories">Content categories</a></th>
   <td><a href="/zh-CN/docs/HTML/Content_categories#Flow_content">流式元素</a>，<a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a>，<a href="/en-US/docs/HTML/Content_categories#Form_listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable">labelable</a>, <a href="/en-US/docs/HTML/Content_categories#Form_resettable">resettable</a>  <a href="/en-US/docs/HTML/Content_categories#Form-associated_content">form-associated element</a>, palpable content.</td>
  </tr>
  <tr>
   <th scope="row">允许元素</th>
   <td><a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a></td>
  </tr>
  <tr>
   <th scope="row">省略标签</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">允许父元素</th>
   <td>接受任何 <a href="/zh-CN/docs/HTML/Content_categories#Phrasing_content">短语元素</a></td>
  </tr>
  <tr>
   <th scope="row">允许 ARIA 角色</th>
   <td>Any</td>
  </tr>
  <tr>
   <th scope="row">DOM 接口</th>
   <td>{{domxref("HTMLOutputElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Attributes" name="Attributes">属性</h2>

<p><span style="line-height: 21px;">这个标签具有 </span><a href="/zh-CN/docs/HTML/Global_attributes">全局属性</a>。</p>

<dl>
 <dt>{{htmlattrdef("for")}}</dt>
 <dd>其它影响计算结果的标签的 ID，可以多个。</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd>与当前标签有关联的 form（从属的表单）。该属性的值必须是当前文档内的表单元素的 ID。如果未指明该属性，output 标签必须是一个 form 的后代标签。该属性的用处在于可以让 output 标签脱离 form 标签，存在于一个网页文档的任意位置。</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>name 属性。</dd>
</dl>

<h2 id="Example" name="Example">例子</h2>

<pre class="brush:html">&lt;form oninput="result.value=parseInt(a.value)+parseInt(b.value)"&gt;
    &lt;input type="range" name="b" value="50" /&gt; +
    &lt;input type="number" name="a" value="10" /&gt; =
    &lt;output name="result"&gt;&lt;/output&gt;
&lt;/form&gt;
</pre>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-output-element', '&lt;output&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-output-element', '&lt;output&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2>

<p>{{Compat("html.elements.output")}}</p>

<h2 id="See_also" name="See_also">参见</h2>

<ul>
 <li>Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.</li>
</ul>

<div>{{HTMLRef}}</div>

<p> </p>