From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/html/element/output/index.html | 113 ++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 files/ja/web/html/element/output/index.html (limited to 'files/ja/web/html/element/output/index.html') diff --git a/files/ja/web/html/element/output/index.html b/files/ja/web/html/element/output/index.html new file mode 100644 index 0000000000..657b6c9324 --- /dev/null +++ b/files/ja/web/html/element/output/index.html @@ -0,0 +1,113 @@ +--- +title: ': 出力要素' +slug: Web/HTML/Element/output +tags: + - Element + - HTML + - HTML forms + - HTML5 + - 'HTML:Flow content' + - 'HTML:フローコンテンツ' + - Reference + - Web +translation_of: Web/HTML/Element/output +--- +
{{HTMLRef}}
+ +

HTML の出力要素 (<output>) は、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
コンテンツカテゴリフローコンテンツ、記述コンテンツ、フォーム関連要素 (リスト化、ラベル付け可能、リセット可能)、知覚可能コンテンツ
許可された内容記述コンテンツ
タグの省略{{no_tag_omission}}
許可された親要素記述コンテンツを受け入れるすべての要素
暗黙の ARIA ロール{{ARIARole("status")}}
許可された ARIA ロールすべて
DOM インターフェイス{{domxref("HTMLOutputElement")}}
+ +

属性

+ +

この要素にはグローバル属性があります。

+ +
+
{{htmlattrdef("for")}}
+
他の要素の {{htmlattrxref("id")}} の空白区切りのリストで、入力値が計算に使用される (または何らかの影響を与える) 要素を示します。
+
{{htmlattrdef("form")}}
+
この要素に関連付けられた (フォームオーナーである) {{HTMLElement("form")}} 要素を指定します。この値は、同じ文書内の <form> 要素の {{htmlattrxref("id")}} である必要があります。 (この属性が設定されていない場合、 <output> 要素は祖先の <form> があれば、その要素に関連づけられます。
+
この属性は <output> 要素を、包含する <form> に限らず文書中のどこにある <form> にも結び付けることができます。これは祖先の <form> 要素を上書きもします。
+
{{htmlattrdef("name")}}
+
要素の名前です。 {{domxref("HTMLFormElement.elements", "form.elements")}} API で使用されます。
+
+ +

<output> の値、名前、内容はフォーム送信の過程で送信されません。

+ +

例

+ +

以下の例では、フォームに 0 から 100 までの範囲の値を取るスライダーと、第2の値を入力できる {{HTMLElement("input")}} 要素があります。どちらかのコントロールの値が変更されるたびに、2つの値が合計された結果が <output> 要素の中に表示されます。

+ +
<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>
+
+ +

{{ EmbedLiveSample('Examples')}}

+ +

アクセシビリティの考慮

+ +

多くのブラウザーでは、この要素を aria-live 領域として実装しています。これにより、支援技術は、その中に投稿された UI インタラクションの結果を発表しますが、その結果を生成するコントロールからフォーカスを外す必要はありません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG', 'forms.html#the-output-element', '<output>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'sec-forms.html#the-output-element', '<output>')}}{{Spec2('HTML5 W3C')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("html.elements.output")}}

-- cgit v1.2.3-54-g00ecf