output要素はHTML5から新たに追加された要素です。

計算した結果を表します。

多くの場合JavaScriptと共に用いられ、ユーザーの入力値に基づいた計算結果や何かしらの実行結果をマークアップします。

使用例

<form name="test01">

<input type="number" name="a"> + <input type="number" name="b"> = <output name="result" for="a b"></output>

</form>



<script>

(function () {

    'use strict';



    var form = document.test01;



    form.addEventListener('keyup', function () {

        form.result.value = Number(form.a.value) + Number(form.b.value);

    });



    form.addEventListener('submit', function (e) {

        e.preventDefault();

    });

}());



</script>

<form name="test02">

<input type="range" min="0" max="10" step="1" name="a"> <output name="result" for="a"></output>

</form>



<script>

(function () {

    'use strict';



    var range = document.test02.a;

    var change = function () {

        document.test02.result.value = this.value;

    };



    range.addEventListener('change', change);

    range.addEventListener('mousedown', function () {

        range.addEventListener('mousemove', change);

        window.addEventListener('mouseup', function () {

            window.removeEventListener('mousemove', change);

            range.removeEventListener('mousemove', change);

        });

    });

}());



</script>

使用可能な属性

  • すべてのグローバル属性
  • for
  • form
  • name

コンテンツカテゴリ

  • フローコンテンツ
  • フレージングコンテンツ
  • フォーム関連要素(リスト対象、ラベル付け可能、リセット可能、再関連付け可能)
  • パルパブルコンテンツ

子要素にしていい要素の種類

  • フレージングコンテンツ

親要素にしていい要素の種類

  • フレージングコンテンツが期待されているすべての要素

仕様書と策定状況

仕様書 策定状況
W3C 勧告
WHATWG Living Standard
最終更新:2017年12月26日

ミツエーリンクスでは、デジタルメディアにおける企業と顧客とのコミュニケーション課題を解決する、さまざまなサービスをご提供しています。ぜひ一度サービスページをご覧ください。

関連情報