＜output要素＞ - 結果の出力

公開日: 2017/02/09

output要素は、JavaScriptを利用してform要素の内容を処理した結果を出力するための要素です。結果を出力するのにこの要素を利用する決まりはありませんが、それに便利なDOM Interfaceを持っています。

概要

名前

output

カテゴリー

Flow content

Phrasing content

Palpable content

Form-associated element

Labelable element

Listed element

Resettable element

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLOutputElement

デフォルトのスタイル

output {
	unicode-bidi: -webkit-isolate;
	display: inline;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-output-element

属性

for

関連付けたいフォームコントロールのidを指定する。

form

関連付けたいform要素のidを指定する。

name

要素の名前。JavaScriptでDOMを操作する時などに利用する。

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜output要素＞ - 結果の出力</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/output/">
		<style>
			body {
				background-color: #fff ;
			}

			input {
				height: 40px ;
				font-size: 16px ;
			}
		</style>
	</head>
	<body>

<p>output要素は、JavaScriptでform要素の内容を処理してその結果を表示するのに便利な要素です。</p>

<form
	onsubmit="return"
	oninput="this.result.value = this.left.valueAsNumber + this.right.valueAsNumber"
>
	<input type="number" name="left" value="1"> +
	<input type="number" name="right" value="1"> =
	<output name="result">2</output>
</form>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/660/"> <meta charset="utf-8"> <title>【デモ】＜output要素＞ - 結果の出力</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/output/"> </head> <body>

<p>output要素は、JavaScriptでform要素の内容を処理してその結果を表示するのに便利な要素です。</p> <form onsubmit="return" oninput="this.result.value = this.left.valueAsNumber + this.right.valueAsNumber" > <input type="number" name="left" value="1"> + <input type="number" name="right" value="1"> = <output name="result">2</output> </form>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } input { height: 40px ; font-size: 16px ; }

</style>

</script>