العنصر <meter>

يُمثِّل العنصر <meter> إما قيمةً عددية ضمن مجال معيّن، أو قيمةً جزئية (fractional value).

مثال بسيط عن استخدام العنصر <meter> لعرض درجة الحرارة التي يجب ضبط الفرن عليها لطهي نوع معيّن من الطعام، لاحظ استخدام الخاصية min لتحديد أدنى قيمة (أقل درجة حرارة متاحة في الفرن) والخاصية max لتحديد أكبر قيمة (أكبر درجة حرارة يمكن تسخين الفرن إليها) والخاصية value لتحديد درجة الحرارة المطلوبة:

<p>سخِّن الفرن إلى
  <meter min="200" max="500" value="350">350 درجة مئوية</meter>.</p>

مثال عن استخدام العنصر <meter> لتمثيل درجة حرارة جسم الإنسان (لاحظ استخدام الخاصية optimum):

<p>درجة حرارة جسم المريض هي
  <meter min="32" low="36.5"  high="37.5" max="41" optimum="37" value="36.8">36.8 &deg;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>.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <meter> بضبط الخاصية display إلى inline-block، وجعل قيمة box-sizing تساوي border-box، وتحديد الارتفاع (height) والعرض (width)، واستخدام المحاذاة الرأسية (vertical-align):

meter {
  box-sizing: border-box;
  display: inline-block;
  height: 1em;
  width: 5em;
  vertical-align: -0.2em;
}

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.