<output>
<output> は HTML の要素で、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 10 | ≤18 | 4 | 7 | 18 | 7 | |
| HTML 属性 | ||||||
| for 属性は label と output で利用できる属性です。 要素上で使用された場合、このラベルが説明するフォーム要素を示します。 要素上で使用された場合、その出力欄で使用される値を表す要素間の関係を明示的に示すことができます。 | 10 | ≤18 | 4 | 7 | 18 | 7 |
| form は HTML の属性で、フォーム関連要素を、同じ文書内の form 要素に関連付けます。この属性は、button、fieldset、input、object、output、select、textarea の各要素に適用されます。 | 10 | ≤18 | 4 | 7 | 18 | 7 |
name | 10 | ≤18 | 4 | 7 | 18 | 7 |
| DOM API | ||||||
| HTMLOutputElement インターフェイスは、（HTMLElement から継承したもの以外に）output 要素のレイアウトや表示を操作するためのプロパティやメソッドを提供します。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのdefaultValueプロパティは、この出力要素のデフォルトテキスト内容を表す。この値の取得と設定は、出力上のNode.textContentの取得と設定と同じです。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのform read-onlyプロパティは、この出力を所有するHTMLFormElementオブジェクトを返す。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementの読み取り専用のhtmlForプロパティは、計算に入力値を寄与している（または、そうでなければ影響を受けている）要素のidのリストを含む、生きているDOMTokenListオブジェクトを返します。これは、出力要素のforコンテンツ属性を反映します。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElement() コンストラクターは、新しい HTMLOutputElement オブジェクトを作成します。 | | | | 15 | | 15 |
| HTMLOutputElement.labels は読み取り専用プロパティで、この output 要素に関連付けられた label 要素の NodeList を返します。 | 9 | 18 | 56 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのnameプロパティは、出力要素の名前を示す。これは要素の name 属性を反映する。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのtype read-onlyプロパティは、文字列 "output "を返す。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
| HTMLOutputElementインターフェイスのvalueプロパティは、出力要素の値を文字列で表し、値が設定されていない場合は空文字列となる。これは、Node.textContent プロパティと同様に、要素の内容を返したり設定したりします。 | 9 | 14 | 4 | 5.1 | 18 | 5 |
- Chrome 50 以前では、このプロパティは `DOMTokenList` ではなく、非推奨の子プロパティ `DOMSettableTokenList` を返していました。
- Chrome Android 50 以前は、このプロパティは `DOMTokenList` ではなく、非推奨の子プロパティ `DOMSettableTokenList` を返していました。
基本構文
<form oninput="result.value = Number(a.value) + Number(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form>ライブデモ
Calculationresult. Display
Output element in forminside. Calculationresult display.for attribute in inputsource reference.
実務での使いどころ
-
<output> の活用
<output> は HTML の要素で、サイトやアプリが計算結果やユーザー操作の結果を挿入することができるコンテナー要素です。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。