HTML5 ile gelen yeni etiketlerden bir tanesi de meter etiketi, şimdilik sadece opera ve google chrome destek veriyor, şimdi meter etiketini biraz tanıyalım.

<METER>

Belirlediğimiz bir aralık içerisindeki değeri kullanıcıya görsel olarak göstermemizi sağlar.

Özellikleri: form, high, low, max, min, optimum ve value.

form: meter elemanının bir form ile ilişkili olup olmadığını tanımlamak için kullanılır, bu özelliğe elemanın ilişkili olduğu form elemanının id değeri verilir, aralarında boşluk bırakmak kaydıyla birden fazla form id değeri verilebilir.

high: min, max özellikleri ile tanımlanan aralıkta yüksek olarak kabul edilecek değer tanımlanır.

low: min, max özellikleri ile tanımlanan aralıkta düşük olarak kabul edilecek değer tanımlanır.

max, min: Aralığın en düşük ve an yüksek değerlerini tanımlamak için kullanılır, eğer bu özellikler tanımlanmazsa max=1,0 min=0 değerini alır.

optimum: min, max değerleri arasında en uygun değer tanımlaması yapmak için kullanılır.

value: ölçüm değerini kullanıcıya göstermek için kullanılır, bu değer min, max değerleri arasında olmalıdır.

Bu etiketin benim için kötü 2 özelliği var.

  1. Opera ve Google Chrome dan başka tarayıcılar desteklemiyor.
  2. CSS ile etikete tam müdahale edemiyoruz.

Şimdi geçelim ekran görüntülerine.

Şimdi de bir örnek yapalım:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML5 METER</title>
	</head>
	<body>
		<p>Meter</p>
		<meter min="0" max="180" low="30" optimum="90" high="120" value="130"></meter>
		<p><a href="http://www.yunusbassahan.com">www.yunusbassahan.com</a></p>
	</body>
</html>

Demoyu incelemek için tıklayın...