files/pt-br/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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

---
title: Output
slug: Web/HTML/Element/Output
tags:
  - Elemento
  - Formulário HTML
  - HTML
  - HTML5
  - Internet
  - Rede
  - Referencia
  - Web
translation_of: Web/HTML/Element/output
---
<h2 id="Sumário">Sumário</h2>

<p>O elemento de saída (&lt;output&gt;) é um elemento no qual um site ou aplicativo pode injetar os resultados de um cálculo ou o resultado de uma ação do usuário.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td>Categorias de conteúdo</td>
   <td><a href="/en/HTML/Content_categories#Flow_content" title="en/HTML/Content categories#Flow content">Flow content</a>, <a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">phrasing content</a>, <a href="/en/HTML/Content_categories#form_listed" title="en/HTML/Content categories#form listed">listed</a>, <a href="/en/HTML/Content_categories#form_labelable" title="en/HTML/Content categories#form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a> <a href="/en/HTML/Content_categories#Form-associated_content" title="en/HTML/Content categories#Form-associated content">form-associated element</a>.</td>
  </tr>
  <tr>
   <td>Conteúdo permitido</td>
   <td><a href="/en/HTML/Content_categories#Phrasing_content" title="en/HTML/Content categories#Phrasing content">Phrasing content</a>.</td>
  </tr>
  <tr>
   <td>Omissão de tag</td>
   <td>Precisa ter ambas as tags de início e fim.</td>
  </tr>
  <tr>
   <td>Documento normativo</td>
   <td><a class="external" href="http://www.w3.org/TR/html5/the-button-element.html#the-output-element" title="http://www.w3.org/TR/html5/the-button-element.html#the-output-element">HTML5, section 4.10.15</a></td>
  </tr>
 </tbody>
</table>

<h2 id="Atributos">Atributos</h2>

<p>Como qualquer elemento HTML, este elemento suporta os <a href="/en/HTML/Global_attributes" title="en/HTML/Global attributes">global attributes</a>.</p>

<dl>
 <dt>{{ htmlattrdef("for") }}</dt>
 <dd>Uma lista de IDs de outros elementos, indicando que estes elementos contribuiram com valores de entrada (input) para o cálculo (ou outros afetados).</dd>
 <dt>{{ htmlattrdef("form") }}</dt>
 <dd>O elemento form ao qual este elemento está associado (seu "proprietário do formulário"). O valor do atributo deve ser um ID de um elemento form no mesmo documento. Se este atributo não está especificado, o elemento output deve ser descendente de um elemento form. Este atributo permite que você coloque elementos output em qualquer lugar em um documento, não apenas como descendentes de seus elementos form.</dd>
 <dt>{{ htmlattrdef("name") }}</dt>
 <dd>O nome do elemento.</dd>
</dl>

<h2 id="Interface_DOM">Interface DOM</h2>

<p>O elemento implementa a interface <a href="/en/DOM/HTMLOutputElement" title="en/DOM/HTMLOutputElement">HTMLOutputElement</a> .</p>

<h2 id="Exemplo">Exemplo</h2>

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

<h2 id="Compatibilidade">Compatibilidade</h2>

<p>{{CompatibilityTable}}</p>

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

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>10</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>10</td>
   <td>11</td>
   <td>nightly</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Recurso</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoDesktop("2.0") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veja_também">Veja também</h2>

<p>Outros elementos relacionados ao form: {{ 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") }}.</p>

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

<div>{{ languages({"en":"en/HTML/Element/output", "fr":"fr/HTML/Element/output", "ja":"ja/HTML/Element/output" }) }}</div>