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. xcopy中文文件名，中文件目录乱码问题

    1.保存成bat脚本文件 2.且该bat文件不能使用utf-8格式,使用ANSI即正常

  2. Exiting an iOS App with Xamarin

    referenced from: http://www.redbitdev.com/exiting-ios-app-with-xamarin-ios/ The team is in the middl ...

  3. 邁向IT專家成功之路的三十則鐵律 鐵律二十四：IT人歲月增長之道-智慧

    老子曾經在道德經中提到:「以道為本而繁守不失的,可算是長久.身雖死亡而精神不朽的,可算是長壽」.人在世間最悲哀的莫過於老死,但最可貴的則莫過於智慧.只是人的智慧不一定會隨著年齡的增長與歲月的流逝而成長 ...

  4. STL源代码剖析 容器 stl_deque.h

    本文为senlie原创.转载请保留此地址:http://blog.csdn.net/zhengsenlie deque ---------------------------------------- ...

  5. iOS开发 解决使用AVAudioRecorder录制后转mp3解决音量小的问题

    使用AVAudioRecorder录音后使用avplayer播放声音小,录音完后转成mp3格式的音频声音也小!!! 老板要求最基本的是不用把手机放到耳边听! 在StackOverFlow上查了一下,加 ...

  6. 改进的SMS4算法的差分故障与暴力联合攻击

    改进的SMS4算法的差分故障与暴力联合攻击 (1．中国科学院研究生院,北京100049) 摘要SMS4是在国内正式使用并于2006年发布的第一个用于无线局域网的商用分组password算法.文中研究了 ...

  7. 2013-06-09 12:03 如何在SQLServer中锁定某行记录

    锁的概述  一. 为什么要引入锁  多个用户同时对数据库的并发操作时会带来以下数据不一致的问题:  丢失更新  A,B两个用户读同一数据并进行修改,其中一个用户的修改结果破坏了另一个修改的结果,比如订 ...

  8. MOS简单应用

    高端功率开关驱动的原理非常简单,和低端功率开关驱动相对应,就是负载一端和开关管相连,另外一端直接接地.正常情况下,没有控制信号的时候,开关管不导通,负载中没有电流流过,即负载处于断电状态:反之,如果控 ...

  9. 测试 MD

    上面是一张图片 总店?

  10. Cannot find autoconf. Please check your autoconf installation and the $PHP_AUTOCONF environment variable. Then, rerun this script.

    运行/usr/local/webserver/php/bin/phpize时出现: Configuring for: PHP Api Version: 20041225 Zend Module Api ...