html5--3.18 新增的output元素

本文介绍了HTML5新增的output元素及其用法,包括name、form和for等属性,并通过一个简单的示例展示了如何利用output元素结合JavaScript实现动态数据输出。

html5--3.18 新增的output元素

学习要点

  • 了解output元素的用法
output元素:数据的输出
    • output元素是HTML5新增的元素,用来设置不同数据的输出



    • output元素的输出内容是由代码控制的



    • 这节课的演示需要用到简单的javascript知识,暂时不理解没关系,主要是了解output元素的使用方法,后边的课程中我们安排了专门的章节讲解javascript



    • output元素的属性:



    • name属性:定义对象的唯一名称。(表单提交时使用)
    • form属性:定义所属的一个或多个表单
    • for属性:定义输出域相关的一个或多个元素
  • 案例演示需要用到两个没有学过的知识,表单事件
    • oninput表单事件:当用户对元素数据的输入时触发
    • parseInt() 是一个javascript函数,它可以解析一个字符串,并返回一个整数。

 

 

实例

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 </head>
 7     <p style="color:#FF0000">
 8     
 9     </p>
10     <form action="L3_01.html" method="get" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
11         <input type="number" id="num1"> +
12         <input type="number" id="num2"> = 
13         <output name="num" for="num1 num2"></output>
14     </form>
15 <body>
16 </body>
17 </html>
View Code

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值