已阅读5页,还剩27页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
广州大学华软软件学院,第5讲HTML5的表单元素,请到240FTP./HTML5移动Web开发下载第5讲文件夹,主要内容,新增表单元素浏览器的支持情况浏览器的全屏问题视频标签video习题,1、新增表单元素,在之前的HTML表单标签中,对于一些功能支持的不够好,比如:文本框提示信息(之前只能通过js和input的事件结合处理)、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能。早期是通过js和dom元素配合实现这些通用的功能。在HTML5中,新标准直接把这些常用的基本的功能直接加入的新的表单标签中。,1、新增表单元素,新的标准中添加了很多输入型控件,比如:Number、URL、Email、Range、Color等。而他们都是以input标签的type属性出场,,1)只能输入数字的Number类型input标签,Html代码为:注:此标签其实就是普通的input标签,只不过是type类型指向了number,标识当前标签接受数字类型输入.另外添加了四个属性.name:属性大家很熟悉了用来标识表单提交时的key值min:是表单标签新增加的属性标识当前输入框输入的最小值max:那就是最大值了step:是步长的意思,也就是在点击增大或者减小的时候的增加减少的步长。,1)只能输入数字的Number类型input标签,Html代码为:小结:min,max,step是表单标签中添加的新的属性。另外就是type又增加了一个新的number类型,接受数字输入。而之前我们要做到这样的效果只能通过js在失去焦点时候判断,控制起来不那么方便,现在一切都那么简单简洁。,2)新型Email类型input标签,Html代码:运行效果:注:在上面HTML代码中,相对于之前的标签,不同点:type=email表示当前input标签接受一个邮箱的输入。另外:placeholder=请输入注册邮箱:提示信息小结:当表单在提交前,此文本框会自动校验是否符合邮箱的正则表达式,另外placeholder属性带来的提示信息功能太强大了。,3)新型Url类型input标签,Html代码:运行效果:,4)新型Tel类型input标签,Html代码:运行效果:,5)新型range类型input标签,Html代码:运行效果:此类型标签的加入,输入范围内的数据变得非常简单容易,而且非常标准,用户输入可感知体验非常好。,官方写法,在谷歌浏览器中出不来效果,火狐应该可以,另外此标签可以跟表单新增加的Output标签一块使用,达到一个联动的效果。看demo源码:0,修改为,6)新的日期、时间、月份、星期input标签,js日期控件有时会出问题。看下面的标签吧:Html代码:运行效果:还有其他的type:month(月)、time、week、datetime-local、datetime。,7)颜色选择input标签,颜色选择器实现起来还是有点困难的,而现在一切都变得那么简单。Html代码:运行效果:,8)input标签自动完成功能,html代码:执行结果:,Input标签新增加的特有属性,1)autofocus属性,demo:此属性可以设置当前页面中input标签加载完毕后获得焦点。2)max,min,step这些上面都介绍过了,都是跟数字相关。3)placeholder:提示信息属性,前面有demo。4)multiple:用于文件上传控件,设置此属性后,允许上传多个文件。5)校验属性:设置了required属性后预示着当前文本框在提交前必须有数据输入,而这一切都是由浏览器自动完成。,Input标签新增加的特有属性,还添加了:pattern正则表达式的校验。demo:inputtype=textautofocus=autofocusrequiredpattern=d+/6)另外一个比较大的改进就是增加了form属性,也就是说,任何一个标签都可以指定它所属于一个表单,而不是必须在进行包裹了。且看demo:,以上内容见例,2、浏览器的支持情况,练习,命名为:学号姓名_实验5,上交至FTP,3、浏览器的全屏问题,对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。,见例ex5_2_Fullscreen.html,(1)launchFullscreen函数,(2)退出全屏,(3)事件监控,4、视频标签video,HTML5新标签标签定义视频,比如电影片段或其他视频流。注;可以在开始标签和结束标签之间放置文
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 眼化学伤的急救和治疗原则
- 脑血栓的溶栓治疗
- 肛肠疾病的中医治疗
- 课件字体标准教学课件
- 高三化学一轮复习 离子反应 课件
- 1.1.1原子结构和原子光谱 课件 高二上学期化学人教版(2019)选择性必修2
- 日光性皮肤病
- 初中生网络安全教育
- 物业主管半年述职报告
- 踩高跷教案反思大班
- 小学一年级简单的语文阅读理解(八篇)
- 2024年贵州省职业院校技能大赛中职组《导游服务》赛项备考试题库(含答案)
- 2024年上海市六年高考英语作文试题真题汇编(含范文)
- 自行车的分类与类型
- 2024年云南黄金矿业集团股份有限公司招聘笔试参考题库含答案解析
- 2024年1月浙江丽水市人才引进面试题及参考答案
- (完整word版)结婚证(英文翻译模板)
- 国际贸易生涯发展展示
- 高二年级期中考试质量分析
- 《图书馆设计案例》课件
- 2024年中国石化招聘笔试参考题库附带答案详解
评论
0/150
提交评论