html5中output元素详解
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元素详解的更多相关文章
- html5中section元素详解
html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...
- html5中time元素详解
html5中time元素详解 一.总结 一句话总结: time的使用的话主要是将时间放在datetime属性里面:<time datetime="2015-10-22"> ...
- html5的datalist元素详解
html5的datalist元素详解 一.总结 一句话总结: datalist元素配合input元素可以出现有提示选择作用的选框效果,还是相对比较简便好用的 1.optgroup元素是干嘛的? opt ...
- HTML5中的Canvas详解
什么是Canvas HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器,您必须使用脚本来绘制图 ...
- html5表单元素详解
表单是Html中获取用户输入的手段.此文对表单的元素进行了详细整理. 表单基本元素 form input button form元素 html4中,form元素相当于表单的外包装,其他都要在里面.ht ...
- Hibernate配置文件中映射元素详解
对象标识符号 在关系数据库表中,主键(Primary Key)用来识别记录,并保证每条记录的唯一性.在Java语言中,通过比较两个变量所引用对象的内存地址是否相同,或者比较两个变量引用的对象值是否相同 ...
- 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口
HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...
- HTML5有语义的内联元素详解
HTML5有语义的内联元素详解 time标签 time 元素表示一个时间值,比如 5:35 P.M., EST, April 23, 2007.例如: Example Source Code:< ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
随机推荐
- org.apache.shiro.session.UnknownSessionException: There is no session with id [xxxx]的解决方案
org.apache.shiro.session.UnknownSessionException: There is no session with id [xxxx]的解决方案 背景描述 Sprin ...
- 七分钟理解 Java 的反射 API
像java一样,一种具有反射功能的语言.允许开发人员在运行时检查类型.方法.字段.注解等,并在程序运行时决定是否使用. 为此,Java的反射API提供类,类,字段,构造函数,方法,注释和其他. 使用它 ...
- Intel虚拟化技术——EPT、VPID
背景 内存用于暂存CPU将要执行的指令和数据,所有程序的运行都必须先载入到内存中才可以,内存的大小及其访问速度也直接影响整个系统性能.在平台虚拟化技术中,Guest的运行也需要依赖内存.和运行在真实物 ...
- Linux中通过ssh将客户端与服务端的远程连接
前提需要:1.在VMware中装上两台linux虚拟机,本博客使用的都是CentOS 7.2.两部虚拟机可以通过命令ping通.3.两部虚拟机中已经通过yum本地仓库安装了sshd服务. 首先 1. ...
- 使用LM386制作Arduino音乐播放器
在我们的项目中添加声音或音乐总是会使其看起来更酷一些,听上去更有吸引力.特别是如果您使用的是Arduino开发板,并且有很多空余的引脚,只需要添加一个SD卡模块和一个普通的扬声器即可轻松添加音效.在本 ...
- P1903 [国家集训队]数颜色 / 维护队列（带修莫队）
题目描述: 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. ...
- P2756 飞行员配对方案问题[二分图最大匹配]
题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其中1 名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中,每一名 ...
- TODO : 一些新的学习计划
1.读完jvm那本书 2.加深Android的开发知识 3.编写atx的demo 4.跑几个apk的性能测试并做详细的性能分析 5.尝试实现一个uiautomator多个手机同时执行脚本的可能性(连线 ...
- discuz论坛门户资讯入库接口【原创】
最近想打造一个社区门户站点,所以写了这个入库接口,可以对接数据入库. <?php /* * Discuz x3.2 门户免登陆发布接口 * 2018-08-10 * Copyright 68xi ...
- test20190519 NOIP 模拟赛 3
序列 [问题描述] 作为一名火星人,你为了占领地球,需要想方设法使地球人失去信心.现在你获得了一项能力,控制今后 n 天的天气温度,对于第 i 天,你能将温度控制在[ai,bi]中任意一个数字, 你的 ...