HTMLالوسم <meter>
- تعريفه
- دعم المتصفحات
- خصائصه
- إستخدامه
- تصميمه الإفتراضي
تعريفه
نستخدم الوسم <meter> لعرض شريط للقياس في الصفحة نسبة إمتلائه تتحدد نسبةً لقيمته الحالية مقارنةً بأصغر و أكبر قيمة تم تحديدها له.
في العادة نقوم بوضع عنوان بجانب الشريط أيضاً بواسطة الوسم <label> و نربطه به كالتالي حتى يعلم المستخدم لما تم وضع الشريط من الأساس.
- مكان الكلمة
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
.
مثال
تصميمه الإفتراضي
لا يوجد تصميم إفتراضي له.