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. IntelliJ IDEA提示：Class JavaLaunchHelper is implemented in both的错误解决

    这个错误是Mac下特有的,并且据说是一个老Bug,不影响使用. 修复方法: Help->Edit Custom Properties,没有这个properties文件的话,IDEA会提示创建,然 ...

  2. GitBook一个专注于帮助文档的工具

    官网:https://www.gitbook.com GitHub组织:https://github.com/gitbookio GitBook一个专注于帮助文档的工具,比如: 1.简单的左侧列表右侧 ...

  3. 【spring data jpa】repository中使用@Query注解使用hql查询，使用@Param引用参数，报错：For queries with named parameters you need to use provide names for method parameters. Use @Param for query method parameters, or when on

    在spring boot中, repository中使用@Query注解使用hql查询,使用@Param引用参数 如题报错: For queries with named parameters you ...

  4. 【spring boot】5.spring boot 创建web项目并使用jsp作前台页面

    贼烦的是,使用spring boot 创建web项目,然后我再idea下创建的,but 仅仅启动spring boot的启动类,就算整个项目都是好着的,就算是能够进入controller中,也不能成功 ...

  5. Spring核心（ioc控制反转）

     IoC,Inversion Of Control 即控制反转,由容器来管理业务对象之间的依赖关系,而非传统方式中的由代码来管理. 其本质.即将控制权由应用程序代码转到了外部容器,控制权的转移就是 ...

  6. vue class绑定 组件

    当在一个自定义组件上使用 class 属性时,这些类将被添加到该组件的根元素上面.这个元素上已经存在的类不会被覆盖. 例如,如果你声明了这个组件: Vue.component('my-componen ...

  7. javascript之Ajax获取和设置标头

    XMLHttpRequest对象中与标头有关的方法: setRequestHeader(<header>,<value>)--用指定值设置标头. getResponseHead ...

  8. python（39）- 网络编程socket练习

    基于tcp的套接字实现远程执行命令的操作 #服务端 import socket import subprocess phone=socket.socket(socket.AF_INET,socket. ...

  9. OpenJDK 源码阅读之 LinkedList

    概要 类继承关系 java.lang.Object java.util.AbstractCollection<E> java.util.AbstractList<E> java ...

  10. struct platform_device中的id成员

    include/linux/platform_device.h #define PLATFORM_DEVID_NONE (-1) #define PLATFORM_DEVID_AUTO (-2) dr ...