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网页开发 ...
随机推荐
- python 提取目录中特定类型的文件
python使用‘os’和‘re’模块提取目录中特定类型的文件,这两个模都是安装python自带的,所以不需要安装. 思路: 使用os库lilstdir获取文件夹中的所有文件名,然后带上文件夹路径组合 ...
- redis 异常 MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk
MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. 解决方 ...
- 二十二、mysql索引原理详解
背景 使用mysql最多的就是查询,我们迫切的希望mysql能查询的更快一些,我们经常用到的查询有: 按照id查询唯一一条记录 按照某些个字段查询对应的记录 查找某个范围的所有记录(between a ...
- 关于SqlServer数据库数据备份失败的问题
当备份的失败,出现说什么应该支持多少个介质簇,但实际出现了多少介质簇,这个时候就要考虑备份的地址是不是出现问题. 首先,检查备份地址,是不是多于两个以上,那么在备份的时候应该注意,备份地址最好留一个, ...
- springboot引用三方jar包
在springboot项目中可能会用到三方工具类(比如接入短信网关时给出的工具jar包),这时候需要在springboot项目中手动引入进来 1. springboot工程目录, lib/ucpaas ...
- 使用Cloudera Manager搭建YARN集群及YARN HA
使用Cloudera Manager搭建YARN集群及YARN HA 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.使用Cloudera Manager搭建YARN集群 1& ...
- mysql主从-ms
一.环境准备 1.准备两台安装有mysql的linux服务器 2.安装的mysql版本最好相同 3.配置两台服务器的主机名和IP地址,主机名:master和slave,IP地址:192.168.0.2 ...
- LabelEncoder save 离线使用
For me the easiest way was exporting LabelEncoder as .pkl file for each column. You have to export t ...
- Java synchronized实现原理总结和偏量锁、轻量锁、重量锁、自旋锁
synchronized实现同步的基础:Java中的每一个对象都可以作为锁.具体表现为以下3种形式. 对于普通同步方法,锁是当前实例对象(this). 对于静态同步方法,锁是当前类的Class对象. ...
- 【Java】《Java程序设计基础教程》第三章学习
3.1 类 类在Java语言中是一种最基本的引用数据类型,是组成Java程序的基本要素.具有相同属性(状态)和方法(行为)的一组对象的集合称为类,其内部包括属性和方法两个主要部分. 3.11 类的定义 ...