HTML 使用For和Form属性的输出元素
示例
以下演示以<output>元素对[for]和[form]属性的使用为特色。请记住,<output>需要JavaScript才能运行。如本示例所示,内联JavaScript通常以表格形式使用。尽管<input>元素是type="number",它们的values不是数字,但它们是文本。所以,如果你需要value进行计算S,则必须在每次转换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>