İlerleme ve Ölçü Çubukları

<meter>

<meter> elemanı ile bir ölçü çubuğu oluşturulur. value niteliği ile verilecek ölçünün değeri girilir. min ve max nitelikleri ile de ölçü çubuğunun en düşük ve en yüksek değerleri belirtilir. Eğer çubuğun maksimum ve minimum değerleri belirtilmezse standart olarak çubuğun 0 ile 1 arasını gösterdiği varsayılır. high ve low değerleri ile çubuğun normal kabul edilen aralığı belirtilir. Bu aralığın dışındaki bir değer çubukla gösterilmeye çalışılırsa dolu kısmın rengi sarı olacaktır. Ölçü çubuğundaki optimum değer de optimum niteliği ile belirtilebilir. form niteliği ile de ölçü çubuğunun bir forma bağlanabileceği belirtilmiştir fakat yazının yazıldığı an itibarı ile bu nitelik hiçbir tarayıcı tarafından desteklenmemektedir.

<meter> elemanı açılış ve kapanış etiketleriyle birlikte kullanılır ve ölçü çubuğunun gösterilememesi durumunda gösterilecek alternatif bir yazı etiketler arasına yazılabilir. Yazının yazıldığı an itibarı ile <meter> elemanı Internet Explorer tarafından desteklenmemektedir.

<!DOCTYPE html>
<html>
<head>
<title>Ölçü Çubuğu</title>
</head>
<body>
<h1>Sınav Sonuçları</h1>
Ahmet: <meter value="95" min="0" max="100" low="35" high="80">95</meter><br>
Ayşe: <meter value="76" min="0" max="100" low="35" high="80">76</meter><br>
Gökhan: <meter value="53" min="0" max="100" low="35" high="80">53</meter><br>
Mehmet: <meter value="41" min="0" max="100" low="35" high="80">41</meter><br>
Ali: <meter value="20" min="0" max="100" low="35" high="80">41</meter><br>
</body>
</html>

<progress>

<progress> elemanı <meter> elemanına çok benzerdir. Fakat bir olaydaki, örneğin bir dosya indirmedeki, ilerlemeyi göstermeye özel olarak kullanılır. Burada kullanılabilecek nitelikler value ve max ile sınırlıdır. value mevcut durumdaki değeri max da ilerlemenin sonunda ulaşılacak değeri gösterir. Bu eleman kullanılırken mevcut değerin JavaScript ile atanmasıyla ilerleme görüntülenebilir. Fakat en azından örnek teşkil etmesi açısından aşağıdaki kod bu değeri sabit olarak atayarak yazılmıştır.

<!DOCTYPE html>
<html>
<head>
<title>Progress</title>
</head>
<body>
<h3>Dosya İndiriliyor:</h3>
<progress value="35" max="100"></progress>
</body>
</html>