آموزش تگ meter در HTML - راهنمای نمایش گرافیکی مقادیر در html

برای نمایش گرافیکی مقدار مورد نظر در یک محدوده به صورت نمودار از تگ meter استفاده می شود. به طور مثال وقتی از این تگ برای نمایش ظرفیت هارد دیسک ...

برای نمایش گرافیکی مقدار مورد نظر در یک محدوده به صورت نمودار از تگ meter استفاده می شود. به طور مثال وقتی از این تگ برای نمایش ظرفیت هارد دیسک یا فضای ذخیره سازی استفاده می شود، به صورت گرافیکی هم فضای استفاده شده و هم فضای خالی را نشان می دهد. یا زمانی که می خواهیم نتیجه آزمایش قند خون را نشان دهیم و یک محدوده نرمال را مشخص کنیم از این تگ استفاده می کنیم.

در صورتی که می خواهید برای نشان دادن نوار پیشرفت نمی توان از تگ meter استفاده کرد و به جای آن باید از تگ progress استفاده کرد.

مثال تگ meter در HTML

مثال 1: نمایش ظرفیت هارد دیسک

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>

مثال 2: امتیاز آزمون که نمره آن بین صفر تا 100 است و نمراتی که در محدوده 30 تا 70 می باشد را به رنگ متمایز نشان می دهد. نمره مطلوب در اینجا 100 می باشد.

<meter min="0" max="100" low="30" high="70" optimum="100" value="60">نمره آزمون</meter>

مثال 3: نتیجه آزمایش قند خون که مقدار می تواند بین صفر تا 200 بوده و مقدار نرمال در محدوده 70 تا 99 می باشد.

پشتیبانی مرورگرها

تگ meter در مرورگرهای کروم 8، فایرفاکس 16، اپرا 11.5، سافاری 6، اینترنت اکسپلورر 13 به بالا پشتیبانی می شود.

مرورگر	کروم	فایرفاکس	اپرا	سافاری	اینترنت اکسپلورر / اج
پشتیبانی	8	16	11.5	6	13

ویژگی ها

ویژگی	مقدار	توضیحات
form	form_id	مشخص می کند تگ meter متعلق به کدام فرم می باشد.
high	number	بیشترین مقدار محدوده را مشخص می کند.
low	number	کمترین مقدار محدوده را مشخص می کند.
max	number	حداکثر مقدار را مشخص می کند.
min	number	حداقل مقدار را مشخص می کند.
optimum	number	مقدار مطلوب و بهینه قابل ورود برای اندازه گیری را مشخص می کند.
value	number	مقدار مورد نظر را مشخص می کند. مقدار دهی این ویژگی ضروری است.