HTMLالوسم <meter>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
تعريفه
نستخدم الوسم <meter>
لعرض شريط للقياس في الصفحة نسبة إمتلائه تتحدد نسبةً لقيمته الحالية مقارنةً بأصغر و أكبر قيمة تم تحديدها له.
في العادة نقوم بوضع عنوان بجانب الشريط أيضاً بواسطة الوسم <label>
و نربطه به كالتالي حتى يعلم المستخدم لما تم وضع الشريط من الأساس.
<label for="meter-id">text</label> <meter id="meter-id" min="min-value" max="max-value" low="low-level" high="high-level" optimum="opt-level" value="current-value"> hidden-text </meter>
- مكان الكلمة
meter-id
نضعid
الوسم<meter>
. - مكان الكلمة
text
نضع عنوان للوسم<meter>
للإشارة إلى ما هو الهدف منه. - مكان الكلمة
min-value
نضع رقم يمثل أقل قيمة في الوسم<meter>
. - مكان الكلمة
max-value
نضع رقم يمثل أعلى قيمة في الوسم<meter>
. - مكان الكلمة
current-value
نضع رقم يمثل القيمة الحالية في الوسم<meter>
. - مكان الكلمة
low-level
نضع رقم يمثل القيمة التي تعتبر منخفضة في الوسم<meter>
. - مكان الكلمة
high-level
نضع رقم يمثل القيمة التي تعتبر مرتفعة في الوسم<meter>
. - مكان الكلمة
omptimum-level
نضع رقم يمثل القيمة التي تعتبر جيدة في الوسم<meter>
. - مكان الكلمة
hidden-text
نضع النص الذي نريده أن يظهر في حال كان المتصفح لا يدعم الوسم<meter>
.
دعم المتصفحات
الجدول التالي يظهر المتصفحات التي تدعم الوسم <meta>
.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
خصائصه
الخاصية form
يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
يجب وضع id
النموذج الذي يتبع له كقيمة للخاصية.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
الخاصية high
يمكن إضافتها للوسم لتحديد متى تعتبر القيمة الموضوعة فيه مرتفعة.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
الخاصية low
يمكن إضافتها للوسم لتحديد متى تعتبر القيمة الموضوعة فيه متدنية.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
الخاصية optimum
يمكن إضافتها للوسم لتحديد متى تعتبر القيمة الموضوعة فيه جيدة.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
الخاصية max
يجب إضافتها للوسم لتحديد أكبر قيمة يمكن الوصول إليها فيه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
الخاصية min
يجب إضافتها للوسم لتحديد أدنى قيمة يمكن الوصول إليها فيه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
الخاصية value
يجب إضافتها لتحديد قيمته الحالية و التي يجب أن تكون بين أصغر و أكبر قيمة فيه.
الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
Chrome | Edge | Firefox | Opera | Safari | Android Webview |
Chrome for Android |
Firefox for Android |
Opera for Android |
Safari for IOS |
Samsung Internet |
6 | ≤18 | 16 | 11 | 6 | غير مدعوم | 18 | 16 | 11 | 10.3 | 1.0 |
إستخدامه
في المثال التالي قمنا بإضافة وسم <meter>
مع إعطائه الخصائص التالية:
- أصغر قيمة فيه هي
0
. - أكبر قيمة فيه هي
100
. - قيمته الحالية هي
50
. - قيمته تعتبر متدينة عند
50
. - قيمته تعتبر جيدة عند
80
. - قيمته تعتبر مرتفعة عند
100
.
مثال
<label for="battery">Battery</label> <meter id="battery" min="0" max="100" low="20" high="100" optimum="80" value="50"> 50/100 charging </meter>
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.