files/ru/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

---
title: '<output>: Элемент вывода'
slug: Web/HTML/Element/output
tags:
  - Вёрстка
  - Элемент
  - вывод
translation_of: Web/HTML/Element/output
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>HTML-элемент вывода </strong>(<strong><code>&lt;output&gt;</code></strong>) является контейнерным элементом, в котором сайт или приложение могут выводить результаты вычислений или действий пользователя.</span></p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Потоковый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_listed">перечисляемые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_labelable">лэйбловые</a>, <a href="/en-US/docs/Web/HTML/Content_categories#Form_resettable">сбрасываемые форма-ассоциированные элементы</a>, явный контент.</td>
  </tr>
  <tr>
   <th scope="row">Разрешённый контент</th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">Фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Все элементы, которые принимают <a href="/en-US/docs/Web/HTML/Content_categories#Phrasing_content">фразовый контент</a>.</td>
  </tr>
  <tr>
   <th scope="row">Допустимые ARIA-роли</th>
   <td>Любые</td>
  </tr>
  <tr>
   <th scope="row">DOM интерфейс</th>
   <td>{{domxref("HTMLOutputElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает <a href="/en-US/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("for")}}</dt>
 <dd>Пробело-разделяемый список <code><a href="/en-US/docs/Web/HTML/Global_attributes/id">id</a></code> других элементов, указывающий, что эти элементы предоставили входные значения для (или иным образом повлияли) вычисления.</dd>
 <dt>{{htmlattrdef("form")}}</dt>
 <dd> <a href="/en-US/docs/Web/HTML/Element/form">Элемент формы</a>, с которым связан этот элемент ("владелец формы"). Значением атрибута должен быть <code>id</code> элемента {{HTMLElement("form")}} в том же документе. Этот атрибут не нужен, если элемент  <code>&lt;output&gt;</code> является потомком элемента <code>&lt;form&gt;</code> (в этом случае эта форма является владельцем формы), или, если элемент <code>&lt;output&gt;</code> вообще не связан с формой.</dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>Имя элемента; используется для идентификации этого <code>&lt;output&gt;</code> при отправке формы.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<p>Эта форма содержит слайдер, значение которого находится в пределах от 0 до 100, и элемент {{HTMLElement("input")}}, в который можно ввести второе значение. Два числа складываются и результат отображается в элементе <code>&lt;output&gt;</code> каждый раз, когда значение любого управляющего элемента меняется.</p>

<pre class="brush: html notranslate">&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;60&lt;/output&gt;
&lt;/form&gt;
</pre>

<p>{{ EmbedLiveSample('Пример')}}</p>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>


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

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>Другие элементы, связанные с формой: {{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>