<output> …… 計算結果を示す HTML5から追加
<output>タグは、計算結果を示す際に使用します。
以下のサンプルは、ユーザーの操作でレンジ入力された結果を、<output>タグを使って表示しています。 Opera10などのブラウザで動作を確認できます。
■HTML4.01からHTML5へのバージョンアップによる変更点
output要素は、HTML5から新たに追加された要素です。
■属性
for属性
計算結果の値とそれが何を表しているのかを、ID名で明確に関連付ける
form属性
どのform要素と関連しているのかを明確に示す
name属性
要素に名前を付ける
計算結果の値とそれが何を表しているのかを、ID名で明確に関連付ける
form属性
どのform要素と関連しているのかを明確に示す
name属性
要素に名前を付ける
■使用例
HTMLソース
<form>
<fieldset>
お名前：<input type="text" name="yourname"><br>
満足度（5段階）：
<input type="range" name="manzoku" min="0" max="5">
<output name="result" onforminput="value=manzoku.value"></output><br>
<input type="submit" value="送信">
</fieldset>
</form>
<form>
<fieldset>
お名前：<input type="text" name="yourname"><br>
満足度（5段階）：
<input type="range" name="manzoku" min="0" max="5">
<output name="result" onforminput="value=manzoku.value"></output><br>
<input type="submit" value="送信">
</fieldset>
</form>
↓↓↓
ブラウザ上の表示
