<output>タグとは
<output>タグとは、プログラムの計算結果を表示するためのタグです。似たようなタグで<samp>タグというものがありますが、これはプログラムの結果をテキストで表示するタグでした。こちらは計算結果を表示するので意味が変わってきます。プログラムの計算結果って具体的にどんな？と思うでしょう。なぜなら私がそう思いました笑
実際に見たほうが早いと思いますので、こちらを見てみてください。↓
このように、メーターを右に左にと動かすたびに右端に書かれた数値が変化します。
これを<output>タグと<form>タグで実現しています。
<output>タグの使い方
<form>内のoninput属性に値を設定する
<output>タグの使い方として、まずそれらを囲む<form>タグ内にあるoninput属性に値を設定しなければなりません。先ほどの好感度メーターを例にコードを見てみましょう。↓
<label>好感度</label>
<form oninput="result.value=maxmin.value">
<input type="range" max="50" min="20" name="maxmin" value="50">
<output name="result" for="maxmin">50</output>
</form>oninput=”result.value=maxmin.value”の部分が、oninput属性の内容になります。
内容の解説ですが、result.valueの部分には<output>で指定した名前を入れます。
oninput=”result.value=maxmin.value”の意味としては、result.value（outputの値）に、maxmin（inputの値）を代入して～（入れますよ～）ということです。
表示させたい結果の値の部分に一体何を設定するのか、というのが＝maxmin.valueの部分で…
<label>好感度</label>
<form oninput="result.value=maxmin.value">
<input type="range" max="50" min="20" name="maxmin" value="50">
<output name="result" for="maxmin">50</output>
</form>このmaxminの部分は<input>タグのnameの部分になります。なのでここのmaxmin.valueのmaxminの部分は毎回変動します。
<input>タグの内容だけだと、このように目には見えない値は設定できても、その数値までは表示してくれません。↓
<input type="range" max="50" min="20" name="maxmin" value="50">左右に調整するバーを作るよ。最高値は50で最低値は20、初期値は50に設定しているよという意味。細かいことはこちらの記事を参照してください。↓
<input>タグでフォームを作成する
今回の場合は<input>タグのrangeという型を使って右に左にと動くバーを作成しました。<input>タグに関してはこちらの記事を参照ください。
<output>タグ内でfor属性の値を設定
<input>タグで数値を表示させたいフォームを作ったら、今度は<output>タグ内のfor属性の値を設定する必要があります。
<label>好感度</label>
<form oninput="result.value=maxmin.value">
<input type="range" max="50" min="20" name="maxmin" value="50">
<output name="result" for="maxmin">50</output>
</form>まずは<output>タグ自体に名前を付けます。ここで付けた名前を<form>開始タグ内のoninput属性の中にあるresult.value=～この部分で使用します。
そのあとfor属性の値を設定する必要があるのですが、for=””の””の中に変化を付けさせたい値のnameの値を指定します。
この場合、インプットフォームの値を示すmaxminという名前を指定し、それが動くたびに表示を変えさせたいので=””の中にmaxminを入れています。また、<output>タグに囲まれた50と書いている部分は最初に右端に表示されている値なのですが、この場合は<input>タグの value=”50″この部分で初期値を50に設定しているので50と表記しました。
<outputタグ>で計算する
HTMLの公式HPに載っていた計算式を少し変えて載せてみます。↓
これは、A値とB値の足し算の結果をアウトプット（出力）するといった内容です。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="10" /> +
<input type="number" name="a" value="90" /> =
<output name="result" for="a b">100</output>
</form>parseInt()というのはJavascriptの関数（便利な機能を持ったプログラムの塊）で、（）で指定した部分の文字を数字に変換するという働きをします。小難しいことはここでは説明しませんが、データの形式というのが常々プログラミングには絡んでくるのでその辺の調整です。
rangeで入れた値と、numberで入れた値を単純に足し算しているのですが、その計算式というのが<form>タグの中で行われ、そしてその結果をresultに反映させている形です。
これを使うと、アンケートサイトなどにある企業への好感度のバロメーターを感覚的に入力出来るようになったり、オンラインショッピングの商品の合計値を出したり、名前欄に入力したものをHPに出力できるようになったりします。表示させることが出来るのは数字だけではなく文字も可能だということです。↓
<form oninput="greeting.value=name.value">
<input type="text" name="name" placeholder="お名前" />
私の名前は<output name="greeting">未入力</output>です
</form><output>タグの使い方まとめ
- 親となる<form>タグにoninput属性を付与し、計算結果を代入する
- <input>でフォームを作成してnameを付ける
- <output>で結果を表示させるフォームを作成してnameを付ける