cman.jpWEBページ作成
広告
<output> 「計算結果の領域」[読み方：アウトプット]
<output>タグは、計算結果またはユーザーアクションを表示します。
| HTML規格 | HTML4.01 | HTML5 |
|---|---|---|
| 使用可否 | × | ○ |
<output>は、HTML5で追加されたタグです
| ブラウザ別の対応状況 |
|---|
| 下記サイトで確認できます。 「Can I use」（英語のサイトです） |
広告
<output> の仕様
| カテゴリー | 使用できる場所（親要素） | コンテンツモデル（子要素） | タグ省略 |
|---|---|---|---|
| フローコンテンツ フレージングコンテンツ リストされた要素、ラベル付け可能な要素、リセット可能な要素、自動大文字継承要素、フォーム関連要素 パブバブルコンテンツ | フレージングコンテンツを子要素にもてる場所 | フレージングコンテンツ | 不可 |
<output> の属性
【構文】
<output name="名前" for="id1 id2"・・・</output>
| 属性 | 意味 | 値のサンプルなど |
|---|---|---|
| for="id" | 計算で使用する要素のIDを指定 スペース区切りで、複数指定可能 | |
| form="id" | 関連付けたいformのIDを指定 | |
| name="名前" | アウトプットの名前を指定 |
| グローバル属性 |
| |
| イベント属性 |
| |
<output>タグのサンプル
name属性を使用したサンプル
id属性を使用したサンプル
<form oninput="opt1.value = a1.valueAsNumber + b1.valueAsNumber">
<input type="number" name="a1" value="0"size="10"> ＋
<input type="number" name="b1" value="0"size="10"> ＝
<output name="opt1">計算結果</output>
</form>
<input type="number" name="a1" value="0"size="10"> ＋
<input type="number" name="b1" value="0"size="10"> ＝
<output name="opt1">計算結果</output>
</form>
id属性を使用したサンプル
<form oninput="document.getElementById('opt2').value =
parseInt(document.getElementById('a2').value, 10) *
parseInt(document.getElementById('b2').value, 10)">
<input type="number" id="a2" value="0" size="10"> *
<input type="number" id="b2" value="0" size="10"> ＝
<output id="opt2" for="a2 b2">計算結果</output>
</form>
parseInt(document.getElementById('a2').value, 10) *
parseInt(document.getElementById('b2').value, 10)">
<input type="number" id="a2" value="0" size="10"> *
<input type="number" id="b2" value="0" size="10"> ＝
<output id="opt2" for="a2 b2">計算結果</output>
</form>
JavaScriptを使用したサンプル
入力値に対応したコメントを表示するサンプル
<script>
function js1(num){
var gage = document.getElementById('mtr1');
gage.value = num.value;
var comment = document.getElementById('cmt');
if (num.value <= 5) {
comment.value = "ディスク残量は半分以上あります";
} else if (num.value > 5, num.value <= 8) {
comment.value = "ディスク残量が半分以下になりました";
} else if (num.value > 8, num.value <= 10) {
comment.value = "ディスク残量が２割以下になりました";
}}
</script>
<form oninput="js1(disk)">
<p>ディスク使用量：
<meter id="mtr1" value="0" min="0" max=10" low="5" high="8" optimum="4.9" style="width:200px">0ＧＢ</meter>
：<output id="cmt">0ＧＢ</output></p>
<p>ディスク使用量を入力してください→
<input type="number" name="disk" placeholder="ＧＢで入力" size="2" min="0" max="10" style="width:80px"> ＧＢ<br>
（0～10ＧＢで入力してください）</p>
</form>
function js1(num){
var gage = document.getElementById('mtr1');
gage.value = num.value;
var comment = document.getElementById('cmt');
if (num.value <= 5) {
comment.value = "ディスク残量は半分以上あります";
} else if (num.value > 5, num.value <= 8) {
comment.value = "ディスク残量が半分以下になりました";
} else if (num.value > 8, num.value <= 10) {
comment.value = "ディスク残量が２割以下になりました";
}}
</script>
<form oninput="js1(disk)">
<p>ディスク使用量：
<meter id="mtr1" value="0" min="0" max=10" low="5" high="8" optimum="4.9" style="width:200px">0ＧＢ</meter>
：<output id="cmt">0ＧＢ</output></p>
<p>ディスク使用量を入力してください→
<input type="number" name="disk" placeholder="ＧＢで入力" size="2" min="0" max="10" style="width:80px"> ＧＢ<br>
（0～10ＧＢで入力してください）</p>
</form>
留意事項
- <output>タグは、表示するのみで値は送信されません。
- javascriptが無効の環境では、計算できないため<output>の内容がそのまま表示されます。
| 関連するHTMLタグ | |
|---|---|
| form | 入力フォーム |
広告