HTML meter Tag

Tutorial HTML <meter>

HTML meter Tag - belajar html meter, element meter mempunyai definisi sebagai pengukur skala dari sebuah hasil atau pencapaian dengan rentang yang diketahui.

Element <meter> diperuntukan untuk skala penilaian atau pencapaian yang telah berlangsung, misal : penilaian rata-rata sebuah kegiatan yang sudah di ketahui hasilnya, nilai kinerja pegawai bulan sebelumnya dan lain sebagainya.

Html <meter> tidak diperuntukan untuk menilai dari proses yang sedang berlangsung, karena dianjurkan menggunakan element html <progress>.

Attribute HTML <meter>

form

Menentukan target dari <form> dengan mengeksekusi ID

Contoh :

<h3>Hasil pemenang kejuaraan bulan lalu adalah</h3>
<p>Andi : Juara 1 <meter form="form1" min="0" max="3" value="3"></meter></p>
<p>Budi : Juara 2 <meter form="form1" min="0" max="3" value="2"></meter></p>
<p>Wati : Juara 3 <meter form="form1" min="0" max="3" value="1"></meter></p>

Nilai atau value attribute ini adalah Form_id

high

Menentukan kisaran yang dianggap bernilai tinggi

Contoh :

<h3>Kinerja Pegawai Bulan Lalu</h3>
<p>Andi: <meter min="0" low="20" high="60" max="100" value="80"></meter></p>
<p>Budi: <meter min="0" low="20" high="50" max="100" value="40"></meter></p>
<p>Wati: <meter min="0" low="20" high="20" max="100" value="3"></meter></p>

Nilai atau value attribute ini adalah nomor/angka

low

Menentukan kisaran yang dianggap bernilai rendah

Contoh :

<h3>Kinerja Pegawai Bulan Lalu</h3>
<p>Andi: <meter min="0" low="60" high="70" value="80" max="100"></meter></p>
<p>Budi: <meter min="0" low="50" high="60" value="70" max="100"></meter></p>
<p>Wati: <meter min="0" low="20" high="30" value="40" max="100"></meter></p>

Nilai atau value attribute ini adalah nomor/angka

max

Menentukan nilai maksimum

Contoh :

<h3>Kinerja Pegawai Bulan Lalu</h3>
<p>Andi: <meter value="20" max="100"></meter> 20%</p>
<p>Budi: <meter value="50" max="100"></meter> 50%</p>
<p>Wati: <meter value="90" max="100"></meter> 90%</p>

Nilai atau value attribute ini adalah nomor/angka

min

Menentukan nilai Minimum

Contoh :

<h3>Kinerja Pegawai Bulan Lalu</h3>
<p>Andi: <meter value="20" min="0" max="100"></meter> 20%</p>
<p>Budi: <meter value="50" min="0" max="100"></meter> 50%</p>
<p>Wati: <meter value="90" min="0" max="100"></meter> 90%</p>

Nilai atau value attribute ini adalah nomor/angka

optimum

Menentukkan jumlah optimal yang berlaku

Contoh :

<h3>Kinerja Handphone</h3>
<p>Handphone A : <meter value="0.4" high="1" low="0.2" optimum="0.6"></meter></p>
<p>Handphone B : <meter value="0.2" high="1" low="0.3" optimum="0.6"></meter></p>
<p>Handphone C : <meter value="0.7" high="1" low="0.4" optimum="0.6"></meter></p>

Nilai atau value attribute ini adalah nomor/angka

value

Menentukkan nilai/hasil yang berlaku dan bersifat wajib diberikan.

Contoh :

<h3>Hasil pemenang kejuaraan bulan lalu adalah</h3>
<p>Andi : Juara 1 <meter min="0" max="3" value="3"></meter></p>
<p>Budi : Juara 2 <meter min="0" max="3" value="2"></meter></p>
<p>Wati : Juara 3 <meter min="0" max="3" value="1"></meter></p>

Nilai atau value attribute ini adalah nomor/angka

Global Attributes:

Element <meter> mencakup Global Attributes HTML.

Event Attributes:

Element <meter> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome	6
Safari	6
Firefox	16
Opera	11
IE	-
Edge	Ya

Mobile

Android Webview	-
Chrome Android	?
Edge Mobile	Ya
Firefox Android	16
Opera Android	11
iOs Safari	-
Samsung Internet	?

Default CSS :

Browser yang support dengan element <meter>, mempunyai nilai default :

/* none */

Secara default masing masing browser akan membawa gaya css atau tampilan untuk element ini.