html5中output元素详解

一、总结

一句话总结:

output元素是HTML5新增的元素,用来设置不同数据的输出,没什么大用,了解即可
    <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>

1、oninput表单事件 触发时机?

当用户对元素数据的输入时触发

2、output元素实例?

output元素配合form的oninput事件
    <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>

二、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中output元素详解的更多相关文章

  1. html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  2. html5中time元素详解

    html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...

  3. html5的datalist元素详解

    html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...

  4. HTML5中的Canvas详解

    什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...

  5. html5表单元素详解

    表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...

  6. Hibernate配置文件中映射元素详解

    对象标识符号 在关系数据库表中,主键(Primary Key)用来识别记录,并保证每条记录的唯一性.在Java语言中,通过比较两个变量所引用对象的内存地址是否相同,或者比较两个变量引用的对象值是否相同 ...

  7. 《HTML5网页开发实例详解》连载(四)HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  8. HTML5有语义的内联元素详解

    HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...

  9. 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

随机推荐

  1. [TensorFlow]Windows下安装并运行Hello World

    参考网址:https://www.tensorflow.org/install/pip (或要VPN) 建议电脑是独显N卡机,安装前先升级驱动,减少不必要错误 1.下载Microsoft Visual ...

  2. python网络爬虫入门(二)

    刚去看了一下,18年2月份写了第一篇关于爬虫的文章(仅仅介绍了使用requests库去获取HTML代码),一年多之后看来很稚嫩也没有多少参考的意义,但没想着要去修改它,留着也是一个回忆吧.至少证明着我 ...

  3. Linux的网络不通流程

    a:xshell连不上的问题第一步:检查网络适配器,是否禁用vmware的虚拟机网卡第二步:检查vmware net8的地址是否为10.0.0.1第三步:检查系统的vmware服务是否启动第四步:检查 ...

  4. pssh安装及使用

    pssh全称是parallel-ssh,基于Python编写的并发在多台服务器上批量执行命令的工具,它支持文件并行复制.远程并行执行命令.杀掉远程主机上的进程等:该工具可以视作ansible的简化版本 ...

  5. 浅谈 form 表单提交

    原创文章,转载请注明出处:http://www.cnblogs.com/weix-l/p/7675230.html 若有错误,请评论指出,谢谢! Form 对象代表一个 HTML 表单.在 HTML ...

  6. flutter入门开发的一些坑

    flutter入门开发的一些坑 很久没写博客了,最近在准备物联网比赛,顺便抽出时间学习了一下flutter,花了近2周完成了一个查看博客博文的一个小的APPdemo,随便截了两张图,如下: 首页 博客 ...

  7. 从零开始部署Django生产环境(适用:《跟老齐学Python Django实战》)

    <跟老齐学Python Django实战>作为市面上少有的Django通俗实战书籍,给了我学习Django很大的帮助.作为一名新入门的菜鸟,全书我重复练习了至少三遍,每次都有新的收获. 前 ...

  8. sqlite3入门之sqlite3_get_table,sqlite3_free_table

    sqlite3_get_table sqlite3_get_table函数原型: int sqlite3_get_table( sqlite3 *db, /* An open database */ ...

  9. VBS 自动发消息给对方

    http://www.vbsedit.com/ Dim Name,Msg Name= "我家丫头" Msg = "333" set ws=wscript.cre ...

  10. linux系统编程之信号(五)

    今天继续对信号进行学习,开始正入正题: sigaction函数: 安装信号之前我们已经学过一个函数:signal,它最早是在unix上出现的,它是对不可靠信号进行安装的,之后出现了可靠信号和实时信号, ...