HTML <output> 输出域

小灰灰 2020-05-16 16:56 819阅读 0赞

HTML `<output>` 输出域
`<output>`标签可以创建一个输出域，专用于显示各种值。
此标签是HTML5新增。
代码实例如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script>
window.onload=function(){
  let form=document.forms[0];
  form.oninput=function(){
    result.value = parseInt(a.value) + parseInt(b.value)
  }
}
</script>
</head>
<body>
<form>
<input type="range" id="a" value="50">
+<input type="number" id="b" value="50">
=<output name="result" id="result" for="a b"></output>
</form>
</body>
</html>
```
调整input元素的值可以在output输出域显示计算结果。
代码分析如下：
（1）.为form表单注册input事件处理函数，利用了事件冒泡原理。
（2）.只要form的input子元素的value值被手动调整，那么触发input事件。
（3）.事件处理函数将计算结果写入赋值给输出域，于是就得到显示。
特别说明：为了节省时间，将id属性值作为对象使用。
**元素属性：**
（1）.for：此属性可以使输出域与其他元素关联起来，属性值是所关联元素的id值，多个id属性值用空格分隔。
（2）.name：规定表单元素的名称，提交表单时，使用此属性接收数据。
（3）.form：属性值是表单id属性值，将输出域与对应表单关联起来，这样可以将其归属于多个form表单。
代码实例如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<script>
window.onload=function(){
  let form=document.forms[0];
  form.oninput=function(){
    result.value = parseInt(a.value) + parseInt(b.value)
  }
}
</script>
</head>
<body>
<form id="ant">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="50">
</form>
=<output form="ant" name="result" id="result" for="a b"></output>
```
将元素的form属性值设置为"ant"，那么即便此元素位于form之外，也归属于它。