ثلاثة عناصر تفاعلية تعرض قيماً وحالات:
• <output>: يعرض نتيجة حساب أو عملية. يرتبط بحقول أخرى بصفة for.
• <progress>: شريط تقدم لمهمة جارية - value: القيمة الحالية (0 إلى max) - max: القيمة القصوى (الافتراضي 1) - بدون value: حالة غير محددة (تحميل مستمر)
• <meter>: يعرض قيمة ضمن نطاق محدد (thermometer-like) - min, max: نطاق القيمة - value: القيمة الحالية - low, high, optimum: تحدد ألوان التحذير - يختلف عن progress: للقيم الثابتة المعروفة النطاق
| 1 | <!-- output: نتيجة حساب --> |
| 2 | <form oninput="total.value = parseInt(price.value) * parseInt(qty.value)"> |
| 3 | <label>السعر: <input type="number" id="price" value="100"></label> |
| 4 | <label>الكمية: <input type="number" id="qty" value="2"></label> |
| 5 | <p>الإجمالي: <output name="total" for="price qty">200</output> جنيه</p> |
| 6 | </form> |
| 7 | |
| 8 | <!-- progress: شريط تحميل --> |
| 9 | <label for="download">تحميل الملف:</label> |
| 10 | <progress id="download" value="70" max="100">70%</progress> |
| 11 | |
| 12 | <!-- progress غير محدد --> |
| 13 | <progress>جاري المعالجة...</progress> |
| 14 | |
| 15 | <!-- meter: مقياس --> |
| 16 | <label>قوة كلمة المرور:</label> |
| 17 | <meter value="3" min="0" max="5" low="2" high="4" optimum="5"> |
| 18 | 3 من 5 |
| 19 | </meter> |
مثال 1: لوحة تقدم الكورس
| 1 | <section class="course-progress"> |
| 2 | <h2>تقدمك في الكورس</h2> |
| 3 | |
| 4 | <!-- تقدم الكورس الكلي --> |
| 5 | <p> |
| 6 | اكتملت <output id="lessons-done">8</output> من |
| 7 | <span>20</span> درساً |
| 8 | </p> |
| 9 | <progress value="8" max="20" aria-label="تقدم الكورس"> |
| 10 | 40% |
| 11 | </progress> |
| 12 | |
| 13 | <!-- تقييم الكورس --> |
| 14 | <p>تقييم المحتوى:</p> |
| 15 | <meter |
| 16 | value="4.2" |
| 17 | min="0" |
| 18 | max="5" |
| 19 | low="2.5" |
| 20 | high="4" |
| 21 | optimum="5" |
| 22 | title="4.2 من 5" |
| 23 | > |
| 24 | 4.2 من 5 |
| 25 | </meter> |
| 26 | <span>4.2 ⭐</span> |
| 27 | |
| 28 | <!-- استخدام الحصص --> |
| 29 | <p>الحصص المستخدمة:</p> |
| 30 | <meter value="7.5" min="0" max="10" low="2" high="8" optimum="5"> |
| 31 | 7.5 GB من 10 GB |
| 32 | </meter> |
| 33 | <span>7.5 GB / 10 GB</span> |
| 34 | </section> |