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. fastscript增加三方控件之二

    fastscript增加三方控件之二 unit fs_BsDataSet; interface {$i fs.inc} uses SysUtils, Classes, fs_iinterpreter, ...

  2. Unity -- Collider(碰撞器与触发器)

    (2d与3d的Collider可以相互存在,但是无法相互协作,如2d是无法检测3d的,反之,一样) 在目前掌握的情况分析,在Unity中参与碰撞的物体分2大块:1.发起碰撞的物体.2.接收碰撞的物体. ...

  3. iOS开发 准确计算Coretext高度

    - (int)getAttributedStringHeightWithString:(NSAttributedString *)  string  WidthValue:(int) width{   ...

  4. 百科知识 isz文件如何打开

    使用UltraISO可以打开

  5. myeclipse2014破解

    去年出现的struts2 bug问题,在过去的项目中一直没做调整,前段时间发现受到影响了.本想这个bug都已经这么长时间了,工具中的包应该也已经被替换了吧,于是下载了最新的myeclipse2014, ...

  6. vue2.0 自定义 侧滑删除（LeftSlider）组件

    1.自定义侧滑删除组件 LeftSlider.vue <!-- 侧滑删除 组件 --> <template> <div class="delete"& ...

  7. Selenium系列之--08 操作已打开的浏览器

    Can Selenium interact with an existing browser session? 参考上面的文章 1. 建一个ReuseWebDriver类 import java.io ...

  8. Python+Selenium框架 ---自动化测试报告的生成

    本文来介绍如何生成自动化测试报告,前面文章尾部提到了利用HTMLTestRunner.py来生成自动化测试报告.关于HTMLTestRunner不过多介绍,只需要知道是一个能生成一个HTML格式的网页 ...

  9. DB 【ACID】

    http://blog.csdn.net/shuaihj/article/details/14163713 http://blog.csdn.net/dief913975849/article/det ...

  10. POJ 1753 (枚举+DFS)

    Flip Game Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 40632   Accepted: 17647 Descr ...