您的位置:首页> 前端教程> HTML教程
文章导航

HTML <output> 输出域

2018-11-13 12:29| 作者: admin| 查看: 915| 评论: 0|来自: 蚂蚁部落

<output>标签可以创建一个输出域,专用于显示各种值。

此标签是HTML5新增。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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属性值作为对象使用。

<output>元素属性:

(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.softwhy.com/" />
<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之外,也归属于它。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部