html5--3.18 新增的output元素

学习要点

  • 了解output元素的用法

output元素：数据的输出

    • output元素是HTML5新增的元素，用来设置不同数据的输出
    • output元素的输出内容是由代码控制的
    • 这节课的演示需要用到简单的javascript知识,暂时不理解没关系，主要是了解output元素的使用方法，后边的课程中我们安排了专门的章节讲解javascript
    • output元素的属性：
    • name属性：定义对象的唯一名称。（表单提交时使用）
    • form属性：定义所属的一个或多个表单。
    • for属性：定义输出域相关的一个或多个元素。
  • 案例演示需要用到两个没有学过的知识，表单事件
    • oninput表单事件：当用户对元素数据的输入时触发
    • parseInt() 是一个javascript函数，它可以解析一个字符串，并返回一个整数。

实例

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>无标题文档</title>

 </head>

     <p style="color:#FF0000">

     </p>

     <form action="L3_01.html" method="get" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">

         <input type="number" id="num1"> +

         <input type="number" id="num2"> =

         <output name="num" for="num1 num2"></output>

     </form>

 <body>

 </body>

 </html>

html5--3.18 新增的output元素的更多相关文章

  1. 新增的output元素 progress元素 meter元素 keygen元素

    结果图 <output>是双标签 name:定义对象的唯一属性 for:定义输出域相关的一个或多个元素. form:定义所属的一个至多个表单. progress和meter一般和JS一起使 ...

  2. html5中output元素详解

    html5中output元素详解 一.总结 一句话总结: output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可 <form action="L3_01. ...

  3. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  4. 疯狂的表单-html5新增表单元素和属性

    疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只 ...

  5. HTML5的结构学习(1) --- 新增的主体结构元素

      1.article 元素 解释:代表文档.页面和应用程序中独立的.完整的.可以被独自引用的内容. 主要用途:博客中的文章.评论,贴吧中的帖子,或者独立的插件等. article中可以包含多种元素例 ...

  6. html5+css3 权威指南阅读笔记（三）---表单及其它新增和改良元素

    一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </f ...

  7. HTML5新增的结构元素

    HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档 ...

  8. html5--select与HTML5新增的datalist元素

    html5--select与HTML5新增的datalist元素 学习要点 掌握select元素与datalist元素的使用 select元素 用来建立一个下拉菜单选项列表 不仅可以在表单中使用,还可 ...

  9. IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素

    HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...

随机推荐

  1. REBXOR

    题面 Description 给定一个含N个元素的数组A,下标从1开始.请找出下面式子的最大值. (A[l1]xorA[l2+1]xor-xorA[r1])+(A[l2]xorA[l2+1]xor-x ...

  2. Web地图服务、WMS 请求方式、网络地图服务（WMS）的三大操作

    转自奔跑的熊猫原文 Web地图服务.WMS 请求方式.网络地图服务(WMS)的三大操作 1.GeoServer(地理信息系统服务器) GeoServer是OpenGIS Web 服务器规范的 J2EE ...

  3. 邁向IT專家成功之路的三十則鐵律 鐵律十五：IT人生活之道-赤子之心

    人的年齡與身體可以因歲月的無情不斷老化,但我們的這一顆心可千萬不要跟著老化.身為IT工作者的我們,每天除了要面對那死板僵硬的電腦挑戰之外,可能還要面臨許多人事方面的紛擾.這時候如果在平日的生活之中,仍 ...

  4. 【spring boot】在Spring mvc中controller中可以拿到对象信息，但是返回给前台却是什么也没有，解决方案

    如图所示: 最后: 问题解决: 这个原因是因为,User类并未给字段提供get/set方法,所以给前台传递过去的值是空的. 解决方案: 为User类添lombok的注解@Data,为实体类提供get/ ...

  5. GOPATH设置

    go help gopath查看gopath的原文帮助信息 go env查看gopath的配置 GOPATH与工作空间 前面我们在安装Go的时候看到需要设置GOPATH变量,Go从1.1版本到1.7必 ...

  6. HashMap 和 Hashtable 的同和不同

    综述 可以直接根据 hashcode 值判断两个对象是否相等吗?肯定是不可以的,因为不同的对象可能会生成相同的 hashcode 值.虽然不能根据 hashcode 值判断两个对象是否相等,但是可以直 ...

  7. The bean 'xxx' could not be injected as a 'xxx'because it is a JDK dynamic proxy that implements

    启动springboot项目的时候示以下错误 Error starting ApplicationContext. To display the conditions report re-run yo ...

  8. iOS经常使用设计模式——单例模式

    第一部分: 创建一个单例对象 单例的应用场景: 单例模式用于当一个类仅仅能有一个实例的时候. 通常情况下这个"单例"代表的是某一个物理设备比方打印机,或是某种不能够有多个实例同一时 ...

  9. C语言-回溯例1

    回溯法解N皇后问题 1,代码分析: 使用一个一维数组表示皇后的位置 其中数组的下标表示皇后所在的行 数组元素的值表示皇后所在的列 这样设计的棋盘,所有皇后必定不在同一行 假设前n-1行的皇后已经按照规 ...

  10. AndroidManifest具体解释之Application(有图更好懂)

    可以包括的标签: <activity> <activity-alias> <service> <receiver> <provider> & ...