العنصر <meter>
يُمثِّل العنصر <meter> إما قيمةً عددية ضمن مجال معيّن، أو قيمةً جزئية (fractional value).
مثال بسيط عن استخدام العنصر <meter> لعرض درجة الحرارة التي يجب ضبط الفرن عليها لطهي نوع معيّن من الطعام، لاحظ استخدام الخاصية min لتحديد أدنى قيمة (أقل درجة حرارة متاحة في الفرن) والخاصية max لتحديد أكبر قيمة (أكبر درجة حرارة يمكن تسخين الفرن إليها) والخاصية value لتحديد درجة الحرارة المطلوبة:
<p>Heat the oven to <meter min="200" max="500"
value="350">350 degrees</meter>.</p>
مثال عن استخدام العنصر <meter> لتمثيل درجة حرارة جسم الإنسان (لاحظ استخدام الخاصية optimum):
<p>His body temperature is <meter min="32" low="36.5" high="37.5" max="41" optimum="37"
value="36.8">36.8 °C</meter>.</p>
| تصنيفات المحتوى | عنصر تنظيمي، عنصر عادي. |
|---|---|
| المحتوى المسموح | المحتوى العادي، لكن لا يُسمَح باستخدام العنصر <meter> داخله.
|
| الوسم المختصر | لا يمكن حذف أيّ من وسمَي البداية أو النهاية. |
| العناصر الأب | أي عنصر يقبل المحتوى العادي. |
| واجهة DOM | HTMLMeterElement
|
دعم المتصفحات
| Chrome | Firefox | Edge | Safari | Opera |
|---|---|---|---|---|
| 6.0 | 16.0 | مدعوم | 5.2 | 11.0 |
أضيف هذا العنصر في HTML5، ولم يكن موجودًا من قبل.
الخاصيات
يمكن استخدام الخاصيات العامة في هذا العنصر.
value
القيمة العددية الحالية، ويجب أن تكون بين القيمتين الدنيا والقصوى (اللتان تُحددان عبر الخاصيتين min و max بالتوالي وبالترتيب) إن حُدِّدتا.
إذا لم تُحدَّد قيمة لهذه الخاصية أو كانت القيمة غير صالحة، فستعمد القيمة 0، أما إذا أُسنِدَت قيمة لكنها ليست ضمن المجال المُحدَّد بالخاصيتين min و max، فستكون القيمة مساويةً لأقرب طرف من طرفَي المجال.
ملاحظة: ما لم يكن مجال قيمة الخاصية value بين 0 و 1، فيجب تعريف المجال باستخدام الخاصتين min و max تاليتَي الذكر، ويفترض أن تكون قيمة الخاصية value بينهما.
min
القيمة الدنيا للمجال، ويجب أن تكون أقل من القيمة القصوى (المُعرّفة بالخاصية max) إن حُدِّدَت.
إن لم تُحدَّد قيمةٌ لهذه الخاصية فالقيمة الافتراضية هي 0.
max
القيمة القصوى للمجال، ويجب أن تكون أكبر من القيمة الدنيا (المُعرَّفة بالخاصية min) إن حُدِّدَت.
إن لم تُحدَّد قيمةٌ لهذه الخاصية فالقيمة الافتراضية هي 1.
low
أكبر قيمة لمجال القيم المنخفضة (low end)، ويجب أن تكون أكبر من القيمة الدنيا (المُعرَّفة بالخاصية min)، وأقل من أصغر قيمة لمجال القيم المرتفعة وأقل من القيمة القصوى (اللتان تُحددان عبر الخاصيتين high و max بالتوالي وبالترتيب).
إن لم تُحدَّد قيمةٌ لهذه الخاصية فالقيمة الافتراضية لأكبر قيمة لمجال القيم المنخفضة (low) تساوي القيمة الدنيا للمجال.
high
أصغر قيمة لمجال القيم المرتفعة (high end)، ويجب أن تكون أصغر من القيمة القصوى (المُعرَّفة بالخاصية max)، وأكبر من أكبر قيمة لمجال القيم المنخفضة وأكبر من القيمة الدنيا (اللتان تُحددان عبر الخاصيتين low و min بالتوالي وبالترتيب).
إن لم تُحدَّد قيمةٌ لهذه الخاصية فالقيمة الافتراضية لأصغر قيمة لمجال القيم المرتفعة (high) تساوي القيمة القصوى للمجال.
optimum
تُشير هذه الخاصية إلى المجال المثالي، ويجب أن تكون ضمن المجال (المُعرّف بالخاصيتين min و max).
عندما تستعمل هذه الخاصية مع الخاصيتين low و high فستعطي إشارةً متى يكون المجال أفضليًا؛ فمثلًا لو كانت القيمة بين المجال الأدنى وأكبر قيمة لمجال القيم المنخفضة (أي min و low)، فسيُعتبَر المجال بين القيمتين min و low على أنه أفضلي.
form
تؤدي هذه الخاصية إلى ربط هذا العنصر بعنصر <form> الذي يتبع هذا العنصر له. فمثلًا عند استخدمنا العنصر <meter> لعرض مجال يستجيب إلى عنصر <input> ذي النوع number.
يجب استخدام هذه الخاصية في حال كان العنصر <meter> تابعًا لأحد النماذج فقط، ويمكن حذفها إن كان العنصر <meter> ابنًا لعنصر <from>.
مصادر ومواصفات
- معيار HTML Living Standard.
- مواصفة HTML5.