html5的表单元素

《html5的表单元素》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5讲HTML5的表单元素请到240FTP../HTML5移动Web开发下载第5讲文件夹广州大学华软软件学院主要内容新增表单元素浏览器的支持情况浏览器的全屏问题视频标签video习题1、新增表单元素在之前的HTML表单标签中，对于一些功能支持的不够好，比如：文本框提示信息（之前只能通过js和input的事件结合处理）、表单校验、日期选择控件、颜色选择控件、范围控件、进度条、标签跨表单等功能。早期是通过js和dom元素配合实现这些通用的功能。在HTML5中，新标准直接把这些常用的基本的功能直接加入的新的表单标签中。1、新增表单元素新的标准中添加了很多输入型控件，比如：N

2、umber、URL、Email、Range、Color等。而他们都是以input标签的type属性出场，1）只能输入数字的Number类型input标签Html代码为:注:此标签其实就是普通的input标签,只不过是type类型指向了number,标识当前标签接受数字类型输入.另外添加了四个属性.name:属性大家很熟悉了用来标识表单提交时的key值min:是表单标签新增加的属性标识当前输入框输入的最小值max:那就是最大值了step：是步长的意

3、思，也就是在点击增大或者减小的时候的增加减少的步长。1）只能输入数字的Number类型input标签Html代码为:小结：min，max，step是表单标签中添加的新的属性。另外就是type又增加了一个新的number类型，接受数字输入。而之前我们要做到这样的效果只能通过js在失去焦点时候判断，控制起来不那么方便，现在一切都那么简单简洁。2）新型Email类型input标签Html代码：

4、placeholder="请输入注册邮箱"/>运行效果：注：在上面HTML代码中，相对于之前的标签，不同点：type="email"表示当前input标签接受一个邮箱的输入。另外：placeholder="请输入注册邮箱"：提示信息小结：当表单在提交前，此文本框会自动校验是否符合邮箱的正则表达式，另外placeholder属性带来的提示信息功能太强大了。3）新型Url类型input标签Html代码：运行效果：4）新型Tel类型input标签Html代码：

5、"tel"placeholder="输入电话"name="phone"/>运行效果：5）新型range类型input标签Html代码：运行效果：此类型标签的加入，输入范围内的数据变得非常简单容易，而且非常标准，用户输入可感知体验非常好。官方写法，在谷歌浏览器中出不来效果，火狐应该可以另外此标签可以跟表单新增加的Output标签一块使用，达到一个联动的效果。看demo源码：

6、orm1">0修改为

7、lue"/>6）新的日期、时间、月份、星期input标签js日期控件有时会出问题。看下面的标签吧：Html代码：运行效果：还有其他的type：month(月)、time、week、datetime-local、datetime。7）颜色选择input标签颜色选择器实现起来还是有点困难的，而现在一切都变得那么简单。Html代码：运行效果：8）input标签自动完成功能html代码：