The Current State of HTML5 Forms

The meter Element

<meter min=0 max=20 value=12>12cm</meter>

Live Demo

Normal
Too High
Too Low
Exact Optimum
Value greater than Max
Value lesser than Min
Firefox
11-
Safari
5.2+
Safari Mobile
5-
Chrome
6+
Opera
11+
IE
10-
Android
2.3-
No support Supported No support Supported Supported No support No support

Supported Browser Screenshots

Chrome 10
Opera 11

Unsupported Browser Screenshots

Firefox 3.6

The Low Down

Explanation

  • Possible uses: final grade of a quiz (16 out of 20 questions correct), displaying disk usage, the amount raised during fundraising activities, or the relevance of a search query result.
  • Does not desaturate when window is out of focus like progress does.
  • Other attributes: low, high, optimum - to indicate different areas of the bar (e.g. low range, medium range, high range)
  • Defaults to inline-block so you can set width/height.
  • Polyfill code here.
  • Opera 10.6 used Presto 2.6 which didn't support this, but Opera 11 uses Presto 2.7 which does.