العنصر <output>

يُمثِّل العنصر <output> ناتج عملية حسابية أو أحد أفعال المستخدم.

مثال تفاعلي (باستخدام شيفرة JavaScript) يُستخدَم فيه العنصر <output> لإظهار ناتج عملية حسابية يجريها المستخدم:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" name="b" value="50"> +
  <input type="number" name="a" value="10"> =
  <output name="result">60</output>
</form>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي، وعنصر عادي، وعنصر مرتبط بالنماذج.
المحتوى المسموح	المحتوى العادي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLOutputElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
10	4.0	مدعوم	11	7

أضيف هذا العنصر أوّل مرة إلى HTML5، ولم يكن موجودًا من قبل في HTML 4.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

for

قائمة بمُعرِّفات ID للعناصر الأخرى، وتُشير إلى أنَّ تلك العناصر قد ساهمت بالنتيجة الظاهرة في هذا العنصر.

استخدمنا في هذا المثال الخاصية for للإشارة إلى أنَّ الحقلين a و b قد ساهما في النتيجة المعروضة في العنصر <output>:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="range" name="b" value="50"> +
  <input type="number" name="a" value="10"> =
  <output name="result" for="a b">60</output>
</form>

form

هذه الخاصية هي قيمة الخاصية id للعنصر <form> الذي يتعلق هذا العنصر به، القيمة الافتراضية هي قيمة الخاصية id لأقرب عنصر <form> أب لهذا العنصر.

هذه الخاصية تسمح لنا بوضع العنصر <output> في أي مكان في المستند، وليس بالضرورة أن يكون ابنًا للعنصر <form>.

استخدمنا في هذا المثال الخاصية form للإشارة إلى أنَّ هذا العنصر تابعٌ للنموذج form1:

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)" id="form1">
  <input type="range" name="b" value="50"> +
  <input type="number" name="a" value="10"> =
</form>
<output name="result" form="form1">60</output>

name

اسم هذا العنصر.

التنسيق الافتراضي

تعرض أغلبية المتصفحات العنصر <output> مع ضبط الخاصية display إلى inline:

output {
  display: inline;
}

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.