HTML आउटपुट एलिमेंट

Forms सिर्फ visitors से जानकारी इकट्ठा करने के लिए नहीं होते, कभी-कभी उन्हें कोई result वापस दिखाना भी होता है, जैसे quantities चुनने के बाद total price, या visitor द्वारा टाइप किए गए दो numbers का sum। <output> element खासतौर पर इसी के लिए है। यह एक form field की तरह बर्ताव करता है लेकिन user-entered values की बजाय calculated results के लिए बना है। इसे उन specific inputs से link किया जा सकता है जिन पर यह निर्भर करता है, जो browsers और assistive technology दोनों को यह समझने में मदद करता है कि इसकी value कहाँ से आई। चूँकि यह एक genuine form element है, form submit होने पर <output> की value भी शामिल होती है, जबकि कोई साधारण paragraph या span जो बस एक number दिखा रहा हो, ऐसा नहीं करता।

In this page:

<output> एलिमेंट क्या है?
'for' से Output को फॉर्म इनपुट्स से लिंक करना
JavaScript से Values कैलकुलेट करना
आउटपुट एलिमेंट को स्टाइल करना
एक्सेसिबिलिटी और आउटपुट एलिमेंट

Syntax

markup

<form oninput="result.value = expression">
  <output name="result" for="input1 input2"></output>
</form>

<output> एलिमेंट क्या है?

<output> element एक form element है जो किसी calculation का result दिखाने के लिए इस्तेमाल होता है, जैसे कोई total, sum, या दूसरे inputs से निकाला गया कोई value। यह दूसरे form controls की तरह ही बर्ताव करता है और form submit होने पर शामिल किया जाता है।

Note:

जब भी दिखाया गया text form inputs से जुड़ा calculated result हो, तो किसी generic element की बजाय <output> इस्तेमाल करें।
Accepted attributes:
for — space-separated ids of input elements
form — id of associated form
name — key for form.elements

Warning: <output> element खुद कुछ भी calculate नहीं करता; इसकी value JavaScript से explicitly सेट करनी होती है।

उदाहरण: What Is the <output> Element?

markup

<output>42</output>

'for' से Output को फॉर्म इनपुट्स से लिंक करना

<output> पर for attribute input IDs की एक space-separated list accept करता है, जो स्पष्ट रूप से बताता है कि displayed result किन fields पर निर्भर करता है। यह assistive technology और markup पढ़ने वाले developers दोनों के लिए relationship को मज़बूत करता है।

Note:

for attribute के अंदर calculation में योगदान देने वाला हर input ID लिस्ट करें, भले ही वे कई हों।
Accepted values:
for — space-separated list of element ids that contribute to the result

Warning: अकेला for attribute अपने आप कोई calculation नहीं करता; यह सिर्फ relationship को document करता है।

उदाहरण: Linking Output to Form Inputs with 'for'

markup

<input type="number" id="a" value="2">
<input type="number" id="b" value="3">
<output for="a b">5</output>

JavaScript से Values कैलकुलेट करना

चूँकि <output> खुद कुछ भी calculate नहीं करता, JavaScript का इस्तेमाल related inputs पर changes सुनने और output की value property को calculated result से अपडेट करने के लिए किया जाता है।

Note: visitors के टाइप करते या slider हिलाते ही values तुरंत recalculate करने के लिए form के oninput event का इस्तेमाल करें।

Warning: input values को जोड़ने से पहले Number() से convert करना भूल जाने पर arithmetic करने की बजाय strings concatenate हो सकती हैं।

उदाहरण: Calculating Values with JavaScript

markup

<input type="number" id="a" oninput="document.getElementById('result').value = Number(a.value) + Number(b.value)">
<input type="number" id="b">
<output id="result"></output>

आउटपुट एलिमेंट को स्टाइल करना

चूँकि <output> एक inline form element है, इसे किसी span या input की तरह साधारण CSS से style किया जा सकता है, जिससे आप element के बर्ताव को बदले बिना calculated results को visually emphasize कर सकते हैं।

Note: output को आसपास के text से अलग style करें ताकि visitors इसे तुरंत एक calculated result के रूप में पहचान सकें।

Warning: output पर बहुत छोटी या low-contrast styling से ज़रूरी calculated totals आसानी से miss हो सकते हैं।

उदाहरण: Styling the Output Element

markup

<output style="font-weight: bold; color: green;">100</output>

एक्सेसिबिलिटी और आउटपुट एलिमेंट

<output> element में कई browsers में एक implicit ARIA live region role होता है, यानी screen readers इसकी value में हुए बदलावों को अपने आप announce कर सकते हैं, जो calculated totals के लिए खासकर उपयोगी है जो बिना page reload के अपडेट होते हैं।

Note: <output> को एक स्पष्ट <label> या descriptive text के साथ जोड़ें ताकि इसकी value बदलने से पहले भी इसका purpose समझ आ जाए।

Warning: updated value बताने के लिए सिर्फ visual styling पर निर्भर रहना screen readers इस्तेमाल करने वाले visitors को बाहर कर देता है, जो इसके बजाय announced change पर निर्भर होते हैं।

उदाहरण: Accessibility and the Output Element

markup

<label for="total">Total:</label>
<output id="total">0</output>

Live Example

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Progress & Meter Next Lesson → HTML Datalist

HTML आउटपुट एलिमेंट

<output> एलिमेंट क्या है?

'for' से Output को फॉर्म इनपुट्स से लिंक करना

JavaScript से Values कैलकुलेट करना

आउटपुट एलिमेंट को स्टाइल करना

एक्सेसिबिलिटी और आउटपुट एलिमेंट

Chapter Quiz — Complete all 20 topics to unlock

Login to run this code