meterタグ:属性情報
属性 | 用途 | 必須 | 設定値 |
---|---|---|---|
form | フォームとの関連付け | - | 関連付けるform要素に指定したid名 |
high | 高領域の上限値 | - | 省略した場合はmax属性と同じと見做す |
low | 低領域の上限値 | - | 省略した場合はmin属性と同じと見做す |
max | メーターが表す範囲の上限値 | - | 省略した場合は1と見做す |
min | メーターが表す範囲の下限値 | - | 省略した場合は0と見做す |
optimum | 最適値 | - | 省略した場合はmin~maxの中間値と見做す |
value | メータが表す値 | ◯ |
実装例1:100点満点中、50点の場合(低領域、高領域設定なし)
HTML5コード
1 |
<meter value="50" min="0" max="100">100点中、50点</meter> |
実行結果
実装例2:100点中、29点(赤点)の場合(低領域=30、高領域=80)
HTML5コード
1 |
<meter value="29" min="0" low="30" high="80" max="100" optimum="100">100点中、29点(赤点)</meter> |
実行結果
実装例3:100点中、30点(標準点)の場合(低領域=30、高領域=80)
HTML5コード
1 |
<meter value="30" min="0" low="30" high="80" max="100" optimum="100">100点中、30点(標準点)</meter> |
実行結果
実装例4:100点中、79点(標準点)の場合(低領域=30、高領域=80)
HTML5コード
1 |
<meter value="79" min="0" low="30" high="80" max="100" optimum="100">100点中、79点(標準点)</meter> |
実行結果
実装例5:100点中、80点(高得点)の場合(低領域=30、高領域=80)
HTML5コード
1 |
<meter value="80" min="0" low="30" high="80" max="100" optimum="100">100点中、80点(高得点)</meter> |