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>

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. 初学ElasticSeacher

    这周,刚接手了同事那边的工作,项目里需要用到ElasticSeacher.但是,之前从未接触过,因此,看了ES的文档,开始慢慢的知道了一些ES的知识. 一.ES简介: Elasticsearch是一个 ...

  2. IntelliJ IDEA版本：Ultimate、Community、EAP版本的区别

    Community: 社区版,免费,但是功能有限制,Android Studio就是基于这个版本定制的. http://idea-intellij.com/intellij-community/ Ul ...

  3. 在asp.net 项目的bin目录中使用子目录

    如果要动态发布第三方扩展或者对asp.net项目进行二次开发时,希望不影响原有的程序并保持原有bin完整性,可以将扩展放到bin下的子目录中,并修改web.config的相应配置. 原配置: < ...

  4. Android图片缓存之Bitmap详解（一）

    前言: 最近准备研究一下图片缓存框架,基于这个想法觉得还是先了解有关图片缓存的基础知识,今天重点学习一下Bitmap.BitmapFactory这两个类. Bitmap: Bitmap是Android ...

  5. 【hibernate postgresql】注解@TypeDef/@Enumerated/数据库字段gender为枚举类型，从前台接受到实体后进行保存报错：org.postgresql.util.PSQLException: ERROR: column "gender" is of type gender but expression is of type character varying

    数据库字段gender为枚举类型,从前台接受到实体后进行保存报错:org.postgresql.util.PSQLException: ERROR: column "gender" ...

  6. ubuntu 配置 django

    安装 安装Apache sudo apt-get install apache2 安装Django 下载Django 安装mod_wsgi sudo apt-get install libapache ...

  7. 【转载】使用事件模型 & libev学习

    参考这篇文章: http://www.ibm.com/developerworks/cn/linux/l-cn-edntwk/ 这里面使用的是 libev ,不是libevent Nodejs就是采用 ...

  8. Spring HTTP Service

    基于Spring MVC, 使用Http Service Invoke远程调用方法 (参考: http://blog.csdn.net/hanqunfeng/article/details/43031 ...

  9. linux与python

    linux一般都装有python,但是版本不一定,需要自己查看,如果版本过低,需要重装.查看python版本方法,直接在命令行输入 python,此时会进入python命令行,同时会显示python版 ...

  10. Selenium系列之--05 录制脚本并导出

    一.下载Firefox Firefox官方下载地址:http://www.firefox.com.cn/download/#more,下载延长支持版. 二.下载插件 Selenium本身有录制功能组件 ...