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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <form id="demo"> <!-- data form --> </form> <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> <hr> <p>HTML METER berada diluar HTML FORM</p> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> <h2>Penjelasan</h2> <ol> <li>Value = nilai yang diberikan</li> <li>high = nilai tertinggi </li> <li>low = nilai terendah</li> <li>optimum = nilai optimal yang diberikan</li> </ol> </body> </html>
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>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <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> </body> </html>
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.