tRikSonic
Tema
  • Original
  • Translate
/ / HTML meter Tag

HTML meter Tag

Terakhir diperbarui : 23 Mei 2018 - 11.56
/ / 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.
HTML meter
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>
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>
<!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>
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>
<!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>
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>
<!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>
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>
<!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>
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>
<!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>
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>
<!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>
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

Chrome6
Safari6
Firefox16
Opera11
IE-
EdgeYa

Mobile

Android Webview-
Chrome Android?
Edge MobileYa
Firefox Android16
Opera Android11
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.
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.