<meter>: Phần tử Đồng hồ đo HTML

Try it

<label for="fuel">Fuel level:</label>

<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
  at 50/100
</meter>

label {
  padding-right: 10px;
  font-size: 1rem;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

value

Giá trị số hiện tại. Giá trị này phải nằm trong khoảng giá trị nhỏ nhất và lớn nhất (thuộc tính min và thuộc tính max) nếu chúng được chỉ định. Nếu không được chỉ định hoặc không hợp lệ, giá trị mặc định là 0. Nếu được chỉ định nhưng không nằm trong khoảng do thuộc tính min và thuộc tính max xác định, giá trị sẽ bằng đầu gần nhất của khoảng đó.

Note: Trừ khi thuộc tính value nằm trong khoảng từ 0 đến 1 (bao gồm cả hai đầu), thuộc tính min và max nên xác định phạm vi sao cho giá trị của thuộc tính value nằm trong đó.

min

Giới hạn số thấp hơn của phạm vi được đo. Giá trị này phải nhỏ hơn giá trị lớn nhất (thuộc tính max), nếu được chỉ định. Nếu không được chỉ định, giá trị nhỏ nhất là 0.

max

Giới hạn số cao hơn của phạm vi được đo. Giá trị này phải lớn hơn giá trị nhỏ nhất (thuộc tính min), nếu được chỉ định. Nếu không được chỉ định, giá trị lớn nhất là 1.

low

Giới hạn số cao hơn của đầu thấp của phạm vi được đo. Giá trị này phải lớn hơn giá trị nhỏ nhất (thuộc tính min), và cũng phải nhỏ hơn giá trị high và giá trị lớn nhất (thuộc tính high và thuộc tính max tương ứng), nếu có. Nếu không được chỉ định, hoặc nhỏ hơn giá trị nhỏ nhất, giá trị low sẽ bằng giá trị nhỏ nhất.

high

Giới hạn số thấp hơn của đầu cao của phạm vi được đo. Giá trị này phải nhỏ hơn giá trị lớn nhất (thuộc tính max), và cũng phải lớn hơn giá trị low và giá trị nhỏ nhất (thuộc tính low và thuộc tính min tương ứng), nếu có. Nếu không được chỉ định, hoặc lớn hơn giá trị lớn nhất, giá trị high sẽ bằng giá trị lớn nhất.

optimum

Thuộc tính này chỉ ra giá trị số tối ưu. Nó phải nằm trong phạm vi (được xác định bởi thuộc tính min và thuộc tính max). Khi dùng với thuộc tính low và thuộc tính high, nó cho biết vị trí nào trong phạm vi được coi là ưa thích. Ví dụ, nếu nó nằm giữa thuộc tính min và thuộc tính low, thì phạm vi thấp hơn được coi là ưa thích. Trình duyệt có thể tô màu thanh đồng hồ đo khác nhau tùy thuộc vào giá trị có nhỏ hơn hoặc bằng giá trị tối ưu hay không.

Ví dụ

Ví dụ cơ bản

HTML

<p>Battery level: <meter min="0" max="100" value="75">75%</meter></p>

Kết quả

Ví dụ phạm vi cao và thấp

Lưu ý rằng trong ví dụ này thuộc tính min bị bỏ qua. Điều này được phép, vì nó sẽ mặc định là 0.

HTML

<p>
  Student's exam score:
  <meter low="50" high="80" max="100" value="84">84%</meter>
</p>

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Tạo các điều khiển biểu mẫu dọc
• <progress>
• ::-webkit-meter-bar, ::-webkit-meter-inner-element, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value: các pseudo-element không chuẩn