output要素

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

コンテンツカテゴリ

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

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

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

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

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

仕様書と策定状況