HTML5的表单元素课件

1、HTML5移动移动Web开发开发第第5讲讲 HTML5的表单元素的表单元素请到请到 240FTP ./ HTML5移动移动Web开发开发下载下载第第5讲文件夹讲文件夹HTML5的表单元素的表单元素HTML5移动移动Web开发开发第第2页页主要内容主要内容新增表单元素新增表单元素浏览器的支持情况浏览器的支持情况浏览器的全屏问题浏览器的全屏问题视频标签视频标签video习题习题HTML5移动移动Web开发开发第第3页页1、新增表单元素、新增表单元素 在之前的在之前的HTML表单标签中，对于一些功能支持的不够好，表单标签中，对于一些功能支持的不够好，比如：文本框提示信息（之前只能通过比如：文本框提示

2、信息（之前只能通过js和和input的事件的事件结合处理）、表单校验、日期选择控件、颜色选择控件、结合处理）、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能。范围控件、进度条、标签跨表单等功能。 早期是通过早期是通过js和和dom元素配合实现这些通用的功能。元素配合实现这些通用的功能。 在在HTML5中，新标准直接把这些常用的基本的功能直接中，新标准直接把这些常用的基本的功能直接加入的新的表单标签中加入的新的表单标签中。HTML5移动移动Web开发开发第第4页页1、新增表单元素、新增表单元素 新的标准中添加了很多输入型控件，比如：新的标准中添加了很多输入型控件，比如：

3、Number、URL、Email、Range、Color等。而他等。而他们都是以们都是以 input标签的标签的type属性出场，属性出场，HTML5移动移动Web开发开发第第5页页1）只能输入数字的）只能输入数字的Number类型类型input标签标签 Html代码为代码为: 注注:此标签其实就是普通的此标签其实就是普通的input标签标签,只不过是只不过是type类型指向类型指向了了number,标识当前标签接受数字类型输入标识当前标签接受数字类型输入.另外添加了四个另外添加了四个属性属性. name:属性大家很熟悉了用来标识表单提交时的属性大家很熟悉了用来标识表单提交时的key值值 mi

4、n:是表单标签新增加的属性标识当前输入框输入的最小值是表单标签新增加的属性标识当前输入框输入的最小值 max:那就是最大值了那就是最大值了 step：是步长的意思，也就是在点击增大或者减小的时候的：是步长的意思，也就是在点击增大或者减小的时候的增加减少的步长。增加减少的步长。 HTML5移动移动Web开发开发第第6页页1）只能输入数字的）只能输入数字的Number类型类型input标签标签 Html代码为代码为: 小结：小结：min，max，step是表单标签中添加的新的属性。另是表单标签中添加的新的属性。另外就是外就是type又增加了一个新的又增加了一个新的number类型，接受数字输入。类

5、型，接受数字输入。而之前我们要做到这样的效果只能通过而之前我们要做到这样的效果只能通过js在失去焦点时候判在失去焦点时候判断，控制起来不那么方便，现在一切都那么简单简洁。断，控制起来不那么方便，现在一切都那么简单简洁。 HTML5移动移动Web开发开发第第7页页2）新型）新型Email类型类型input标签标签 Html代码：代码： 运行效果：运行效果： 注：在上面注：在上面HTML代码中，相对于之前的标签，不同点：代码中，相对于之前的标签，不同点：type=email表示当前表示当前input标签接受一个邮箱的输入。标签接受一个邮箱的输入。另另外：外：placeholder=请输入注册邮箱请

6、输入注册邮箱 ：提示信息提示信息 小结：当表单在提交前，此文本框会自动校验是否符合邮箱小结：当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式，另外的正则表达式，另外placeholder属性带来的提示信息功能属性带来的提示信息功能太强大了。太强大了。HTML5移动移动Web开发开发第第8页页3）新型）新型Url类型类型input标签标签 Html代码：代码： 运行效果：运行效果：HTML5移动移动Web开发开发第第9页页4）新型）新型Tel类型类型input标签标签 Html代码：代码： 运行效果：运行效果：HTML5移动移动Web开发开发第第10页页5）新型）新型range类型类型

7、input标签标签 Html代码：代码： 运行效果：运行效果： 此类型标签的加入，输入范围内的数据变得非常简单容易，此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准，用户输入可感知体验非常好。而且非常标准，用户输入可感知体验非常好。HTML5移动移动Web开发开发第第11页页官方写法，在谷歌浏览器中出不来效果，火狐应该可以官方写法，在谷歌浏览器中出不来效果，火狐应该可以 另外此标签可以跟表单新增加的另外此标签可以跟表单新增加的Output标签一块使用，标签一块使用，达到一个联动的效果。看达到一个联动的效果。看demo源码：源码： 0 HTML5移动移动Web开发开发第第12页页

8、修改为修改为 HTML5移动移动Web开发开发第第13页页6）新的日期、时间、月份、星期）新的日期、时间、月份、星期input标签标签 js日期控件日期控件有时会出问题有时会出问题。看下面的标签吧：。看下面的标签吧： Html代码：代码： 运行效果：运行效果： 还有其他的还有其他的type：month(月月) 、time、week、datetime-local、datetime。HTML5移动移动Web开发开发第第14页页7）颜色选择）颜色选择input标签标签 颜色选择器实现起来还是有点困难的，而现在一切都变得颜色选择器实现起来还是有点困难的，而现在一切都变得那么简单。那么简单。 Html代

9、码：代码： 运行效果：运行效果：HTML5移动移动Web开发开发第第15页页8）input标签自动完成功能标签自动完成功能 html代码：代码： 执行结果：执行结果：HTML5移动移动Web开发开发第第16页页Input标签新增加的特有属性标签新增加的特有属性 1）autofocus属性属性， demo： 此属性可以设置当前页面中此属性可以设置当前页面中input标签加载完毕后获得焦点。标签加载完毕后获得焦点。 2）max,min,step这些上面都介绍过了，都是跟数字相关。这些上面都介绍过了，都是跟数字相关。 3）placeholder:提示信息属性，提示信息属性，前面前面有有demo。 4

10、）multiple：用于文件上传控件，设置此属性后，允许：用于文件上传控件，设置此属性后，允许上传多个文件。上传多个文件。 5）校验属性：设置了）校验属性：设置了required 属性后预示着当前文本框属性后预示着当前文本框在提交前必须有数据输入，而这一切都是由浏览器自动完在提交前必须有数据输入，而这一切都是由浏览器自动完成。成。HTML5移动移动Web开发开发第第17页页Input标签新增加的特有属性标签新增加的特有属性 还还添加了：添加了：pattern正则表达式的校验。正则表达式的校验。 demo：input type=text autofocus =autofocus required

11、 pattern=d+ / 6）另外一个比较大的改进就是增加了）另外一个比较大的改进就是增加了form属性，也就是属性，也就是说，任何一个标签都可以指定它所属于一个表单，而不是说，任何一个标签都可以指定它所属于一个表单，而不是必须在必须在进行包裹了。进行包裹了。 且看且看demo：HTML5移动移动Web开发开发第第18页页 以上内容见例以上内容见例 HTML5移动移动Web开发开发第第19页页2、浏览器的支持情况、浏览器的支持情况HTML5移动移动Web开发开发第第20页页HTML5移动移动Web开发开发第第21页页练习，命名为：学号姓名练习，命名为：学号姓名_实验实验5，上交至，上交至FT

12、PHTML5移动移动Web开发开发第第22页页HTML5移动移动Web开发开发第第23页页3、浏览器的全屏问题、浏览器的全屏问题 对你想要全屏显示的页面元素调用全屏方法，浏览对你想要全屏显示的页面元素调用全屏方法，浏览器窗口就会变成全屏，但会先请求用户允许全屏模器窗口就会变成全屏，但会先请求用户允许全屏模式。式。 要注意，用户很有可能会拒绝全屏模式。如果用户要注意，用户很有可能会拒绝全屏模式。如果用户运行全屏模式，则浏览器的工具条等按钮菜单都会运行全屏模式，则浏览器的工具条等按钮菜单都会隐藏，你的页面会覆盖整个屏幕。隐藏，你的页面会覆盖整个屏幕。HTML5移动移动Web开发开发第第24页页见例

13、见例 ex5_2_Fullscreen.html （1）launchFullscreen函数函数HTML5移动移动Web开发开发第第25页页（2）退出全屏）退出全屏HTML5移动移动Web开发开发第第26页页（3）事件监控）事件监控HTML5移动移动Web开发开发第第27页页4、视频标签、视频标签video HTML 5 新新标签标签 标签定义视频，比如电影片段或其他视频流。标签定义视频，比如电影片段或其他视频流。 注注;可以在开始标签和结束标签之间放置文本内容，可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。这样老的浏览器就可以显示出不支持该标签的信息。 例：例： 您的浏览器不支持您的浏览器不支持 vid