「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

meterタグ:属性情報

属性用途必須設定値
formフォームとの関連付け-関連付けるform要素に指定したid名
high高領域の上限値-省略した場合はmax属性と同じと見做す
low低領域の上限値-省略した場合はmin属性と同じと見做す
maxメーターが表す範囲の上限値-省略した場合は1と見做す
minメーターが表す範囲の下限値-省略した場合は0と見做す
optimum最適値-省略した場合はmin~maxの中間値と見做す
valueメータが表す値

実装例1:100点満点中、50点の場合(低領域、高領域設定なし)

HTML5コード

実行結果

100点中、50点

実装例2:100点中、29点(赤点)の場合(低領域=30、高領域=80)

HTML5コード

実行結果

100点中、29点(赤点)

実装例3:100点中、30点(標準点)の場合(低領域=30、高領域=80)

HTML5コード

実行結果

100点中、30点(標準点)

実装例4:100点中、79点(標準点)の場合(低領域=30、高領域=80)

HTML5コード

実行結果

100点中、79点(標準点)

実装例5:100点中、80点(高得点)の場合(低領域=30、高領域=80)

HTML5コード

実行結果

100点中、80点(高得点)

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">