Meter

Sisa kuota internet, hasil tes ketrampilan barista, persentase capaian penjualan bulanan — semua adalah nilai pada skala yang batas bawah dan atasnya sudah diketahui. Nilai seperti ini tidak sedang berjalan ke mana pun; ia sekadar menempati satu titik pada rentangnya. HTML punya elemen khusus untuk melaporkannya: meter, tetangga progress yang paling sering tertukar dengannya padahal perannya berbeda.

Chapter ini membahas atribut rentangnya — min, max, low, high, optimum — pewarnaan otomatis bawaan browser, dan batas pemakaiannya.

Nilai pada Skala yang Diketahui #

Aturannya: meter menampilkan satu nilai terukur pada rentang yang sudah ditentukan. Rentang dinyatakan lewat pasangan min dan max (bawaannya 0 dan 1), posisi saat ini lewat value, dan pembatas wilayah lewat low serta high. Atribut optimum menandai titik nilai yang paling diinginkan pada rentang itu.

Mekanisme pewarnaannya otomatis. Browser membagi rentang menjadi tiga wilayah — di bawah low, di antara low dan high, dan di atas high — lalu mengikuti posisi optimum: wilayah yang memuat optimum diwarnai hijau (kondisi terbaik), wilayah paling jauh dari optimum merah, dan wilayah di antaranya kuning. Kita tidak menulis satu baris CSS pun untuk logika itu; browser yang menghitung dan mewarnai.

Contoh Kuota Data #

Laporan penggunaan internet bulanan Kedai Kopi Siti:

<p>Penggunaan internet bulan ini:</p>
<meter min="0" max="25" low="5" high="20" optimum="0" value="18">
  18 GB terpakai dari kuota 25 GB.
</meter>
<p>18 GB terpakai dari kuota 25 GB.</p>

Mari kita telaah kode di atas:

1. Baris 2 (min="0" max="25"): skala kuota dalam gigabyte — rentang penuh dari kosong sampai batas paket.
2. Baris 2 (low="5" high="20"): pembatas wilayah — di bawah 5 GB dianggap hemat, di atas 20 GB dianggap boros.
3. Baris 2 (optimum="0"): titik paling diinginkan adalah nol pemakaian, jadi wilayah hijau berada di bawah low.
4. Baris 2 (value="18"): posisi bulan ini — berada di wilayah tengah (antara low dan high), sehingga browser menampilkan warna kuning: masih aman, tetapi mendekati batas.
5. Baris 2–3 (teks di dalam meter): konten cadangan untuk peranti lama yang tidak mengenali elemen ini — browser modern mengabaikannya dan merender batang.
6. Baris 4 (paragraf): angka tetap ditampilkan sebagai teks, karena meter — sama seperti progress — tidak mencetak nilainya sendiri.

Perhatikan pola optimum di contoh: untuk pemakaian, kecil itu baik, jadi optimum diletakkan di wilayah bawah. Untuk nilai yang besar itu baik — skor tes misalnya dengan min="0" max="100" low="40" high="70" optimum="100" — optimum diletakkan di wilayah atas dan pewarnaan ikut terbalik: skor 88 langsung tampil hijau.

Tiga variasi berikut menampung kedua pola itu sekaligus. Bandingkan warna batangnya — seluruh pewarnaan dikerjakan browser dari atribut semata, tanpa satu baris CSS:

Nilai 18 berada di antara low dan high sementara optimum di bawah — kuning. Skor 88 jatuh pada wilayah yang memuat optimum="100" — hijau. Nilai 23 melewati high menjauhi optimum — merah. Arah pewarnaan selalu ditentukan posisi optimum, bukan besar kecilnya angka.

meter atau progress #

Perbedaannya satu frasa: progress untuk tugas yang sedang berjalan, meter untuk nilai yang sudah selesai diukur.

Jangan memakai meter untuk kemajuan: pembaca layar akan mengumumkannya sebagai nilai terukur, bukan proses — informasi yang menyesatkan bagi pengguna yang menunggu.

Ringkasan #

• meter melaporkan satu nilai terukur pada rentang min–max yang diketahui.
• Wilayah low, high, dan optimum membuat browser mewarnai batang otomatis: hijau pada wilayah optimum, merah pada wilayah terjauh.
• Pakai meter untuk nilai statis (kuota, skor, persentase capaian) dan tetaplah memakai progress untuk proses yang berjalan.
• Rating kualitatif bukan wilayah meter — tampilkan lewat teks atau gambar.

Chapter berikutnya menutup trilogi pelaporan dengan elemen yang berbicara: output, penampung hasil perhitungan yang langsung diumumkan pembaca layar.