output(表单的计算结果)【新元素

<output label=" ">~</output>

使用output元素表示各种计算结果。例如,表示input元素的range类型控件的值。

使用for内容属性指定控件的id值,从而使output元素与该控件建立链接。如果与多个控件建立链接时,使用半角空格分隔每个控件的值。

属性

1、form内容属性
指定与该当元素建立链接的表单的id值。
2、for内容属性
指定与该当元素建立链接的控件的id值。
3、name内容属性
指定控件的名称。

使用例1

例说明:使用for属性指定想要对应的控制的id属性的值,这样output元素与控制建立连动, 如果想要与多个控制建立联系时,各个控制的id值用半角空格间隔。使用JavaScript与关联的控制建立联系时,也非常有用。

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

表单与output元素配合使用的例:

<form action="#" method="get">

<input type="range" name="degree" id="degree"

onchange="form.elements.open.value=this.value;"/>

<output for="degree" name="open">50</output>

<input type="submit" value="送信"/>

</form>

</body>

</html>

使用例2

例说明:range类型的控制上能够设置值为0、1、2中的其中一值, 与之连动的output元素的value IDL属性中设置了“小”、“中”、“大”。

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

range类型的控制值与output元素连动的例:

<form action="#" method="get">

<input type="range" name="degree" id="dg2" value="0" min="0" max="2"

onchange="open.value=['小','中','大'][form.elements.degree.value];"/>

<output for="dg2" name="open"></output>

<input type="submit" value="送信"/>

</form>

</body>

</html>

使用例3

例说明:两个number类型的input元素(range类型的input元素与number类型)的两个值相加,得到output元素的IDL属性的值,并显示到页面上。

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<p>两个number类型的input元素的值相加:</p>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">

<input type="number" id="a" value="0">

+<input type="number" id="b" value="0">

=<output name="x" for="a b">0</output>

</form>

<p>range类型的input元素与number类型的input元素的值相加:</p>

<form oninput="v.value=parseInt(c.value)+parseInt(d.value)">0

<input type="range" id="c" value="50">100

+<input type="number" id="d" value="50">

=<output name="v" for="c d"></output>

</form>

</body>

</html>

X

浏览器支持情况

元素
output no 10.0 4.0 5.1 11.0

关联内容