使用 For 和 Form 屬性的輸出元素

以下演示以 <output> 元素使用 [for] 和 [form] 屬性為特色。請記住，<output> 需要 JavaScript 才能執行。如本例所示，內聯 JavaScript 通常用於表單中。雖然 <input> 元素是 type="number"，但它們的 values 不是數字，它們是文字。因此，如果你需要計算 values，則必須使用以下方法將每個 value 轉換為數字：parseInt()，parseFloat()，Number() 等。

現場演示

    <!--form1 will collect the values of in1 and in2 on 'input' event.-->
    <!--out1 value will be the sum of in1 and in2 values.-->    

<form id="form1" name="form1" oninput="out1.value = parseInt(in1.value, 10) + parseInt(in2.value, 10)">

  <fieldset>

    <legend>Output Example</legend>

      <input type="number" id="in1" name="in1" value="0">
    <br/>
    +
    <input type="number" id="in2" name="in2" value="0">

  </fieldset>

</form>

<!--[for] attribute enables out1 to display calculations for in1 and in2.-->
<!--[form] attribute designates form1 as the form owner of out1 even if it isn't a descendant.-->

<output name="out1" for="in1 in2" form="form1">0</output>