وسم ناتج الحساب <output>

وسم output يعرض نتيجة حساب أو تفاعل مستخدم — وقارئات الشاشة تعلن تغيّر قيمته تلقائيًّا.

المكان الدلالي الصحيح لنتائج تُحسب أمام المستخدم: مجموع سلة المشتريات، ناتج حاسبة القروض، قيمة شريط تمرير. ميزته الخفية الثمينة: يعامل افتراضيًّا كمنطقة حية (live region) — قارئات الشاشة تنطق قيمته الجديدة تلقائيًّا عند تغيّرها، بلا أي إعداد ARIA يدوي.

خاصية for تسمّي معرفات الحقول الداخلة في الحساب — توثيق ذاتي للعلاقة.

الصياغة

<output name="result" for="a b">0</output>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<form oninput="total.value = Number(price.value) * Number(qty.value)">
  <label>السعر: <input type="number" id="price" value="5" style="width:70px"></label>
  ×
  <label>الكمية: <input type="number" id="qty" value="2" style="width:70px"></label>
  =
  <output name="total" for="price qty" style="font-weight:bold; color:#6d28d9">10</output> دنانير
</form>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
for	معرفات الحقول المشاركة في الناتج، تفصلها مسافات
name	اسمه داخل النموذج للوصول البرمجي

💡 نصائح عملية

مع oninput على النموذج تبني حاسبات حية بسطر واحد كما في المثال
الوصولية المجانية (الإعلان التلقائي للتغير) هي سبب تفضيله على span

⚠️ أخطاء شائعة

عرض النتائج في span/div وخسارة الإعلان التلقائي لقارئات الشاشة
استخدامه لنص ثابت لا يُحسب — هو للنواتج المتغيرة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs