تگ output در html

تگ output برای نمایش نتیجه یک عملیات محاسباتی یا تعاملی در فرم استفاده می‌شود. این تگ معمولاً همراه با جاوااسکریپت یا رویدادهایی مثل oninput برای نمایش نتیجه به‌کار می‌رود.

این تگ می‌تواند با inputهای فرم در ارتباط باشد و خروجی آن‌ها را به کاربر نمایش دهد. ویژگی for می‌تواند شناسه inputهای مرتبط را مشخص کند.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" value="0">
  +
  <input type="number" id="b" value="0">
  =
  <output name="result" for="a b">0</output>
</form>

تگ <output> از ویژگی‌های زیر پشتبانی می‌کند:

ویژگی name مشخص می‌کند که خروجی تگ <output> در هنگام ارسال فرم به سرور با چه نامی ثبت شود. این مقدار به عنوان کلید در داده‌های ارسالی فرم ذخیره می‌شود. در صورتی که خروجی شما فقط برای نمایش است و نیازی به ارسال به سرور ندارد، می‌توانید این ویژگی را حذف کنید.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input id="a" name="a" type="number" value="0">
  +
  <input id="b" name="b" type="number" value="0">
  =
  <output name="result">0</output>
</form>

ویژگی for مشخص می‌کند که خروجی این تگ به کدام فیلد یا فیلدهای فرم وابسته است. مقدار این ویژگی باید شامل شناسه‌های (id) عناصر input جداشده با فاصله باشد. این ویژگی کاربرد معنایی دارد و برای ابزارهای کمکی (مانند screen reader) و پردازش دقیق‌تر فرم مفید است.

<form oninput="sum.value = parseInt(x.value) + parseInt(y.value)">
  <input type="number" id="x" value="2">
  +
  <input type="number" id="y" value="3">
  =
  <output name="sum" for="x y">5</output>
</form>

ویژگی form زمانی به کار می‌رود که تگ <output> خارج از تگ <form> قرار داشته باشد. در این صورت می‌توانید با استفاده از این ویژگی، خروجی را به یک فرم مشخص متصل کنید. مقدار این ویژگی باید برابر با مقدار id فرم هدف باشد.

<form id="calcForm" oninput="total.value = parseInt(price.value) * parseInt(qty.value)">
  <input id="price" type="number" value="100">
  ×
  <input id="qty" type="number" value="2">
</form>

نتیجه:
<output form="calcForm" name="total">200</output>

خروجی این تگ مانند متن ساده نمایش داده می‌شود ولی مرورگر ممکن است آن را کمی برجسته‌تر نشان دهد (مانند bold یا border سبک).

output {
  display: inline;
  padding: 2px 6px;
  font-weight: bold;
}