الفرق بين المراجعتين ل"HTML/meter"

المراجعة الحالية بتاريخ 03:22، 25 فبراير 2018

يُمثِّل العنصر <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.

@@ سطر 3: / سطر 3: @@
 مثال بسيط عن استخدام العنصر <code><meter></code> لعرض درجة الحرارة التي يجب ضبط الفرن عليها لطهي نوع معيّن من الطعام، لاحظ استخدام الخاصية <code>[[#min|min]]</code> لتحديد أدنى قيمة (أقل درجة حرارة متاحة في الفرن) والخاصية <code>[[#max|max]]</code> لتحديد أكبر قيمة (أكبر درجة حرارة يمكن تسخين الفرن إليها) والخاصية <code>[[#value|value]]</code> لتحديد درجة الحرارة المطلوبة:<syntaxhighlight lang="html">
-<p>Heat the oven to <meter min="200" max="500"
+<p>سخِّن الفرن إلى
-  value="350">350 degrees</meter>.</p>
+  <meter min="200" max="500" value="350">350 درجة مئوية</meter>.</p>
 </syntaxhighlight>مثال عن استخدام العنصر <code><meter></code> لتمثيل درجة حرارة جسم الإنسان (لاحظ استخدام الخاصية <code>[[#optimum|optimum]]</code>):<syntaxhighlight lang="html">
-<p>His body temperature is <meter min="32" low="36.5" high="37.5" max="41" optimum="37"
+<p>درجة حرارة جسم المريض هي
-  value="36.8">36.8 &deg;C</meter>.</p>
+  <meter min="32" low="36.5"  high="37.5" max="41" optimum="37" value="36.8">36.8 &deg;C</meter>.</p>
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 81: / سطر 82: @@
 يجب استخدام هذه الخاصية في حال كان العنصر <code><meter></code> تابعًا لأحد النماذج فقط، ويمكن حذفها إن كان العنصر <code><meter></code> ابنًا لعنصر <code>[[HTML/form|<from>]]</code>.
+== التنسيق الافتراضي ==
+تعرض أغلبية المتصفحات العنصر <code><meter></code> بضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>inline-block</code>، وجعل قيمة <code>[[CSS/box-sizing|box-sizing]]</code> تساوي <code>[[CSS/border-box|border-box]]</code>، وتحديد الارتفاع (<code>[[CSS/height|height]]</code>) والعرض (<code>[[CSS/width|width]]</code>)، واستخدام المحاذاة الرأسية (<code>[[CSS/vertical-align|vertical-align]]</code>):<syntaxhighlight lang="css">
+meter {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 1em;
+  width: 5em;
+  vertical-align: -0.2em;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==
 *معيار [https://html.spec.whatwg.org/multipage/forms.html#the-meter-element HTML Living Standard].
 *مواصفة [http://www.w3.org/TR/html5/forms.html#the-meter-element HTML5].
-[[تصنيف:Forms]]
+[[تصنيف:HTML|{{SUBPAGENAME}}]]
-[[تصنيف:HTML]]
+[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
-[[تصنيف:HTML Elements]]
+[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]