Html5对表单、视频及音频功能性探索.docx

Html5对表单、视频及音频功能性探索1 HTML5对表单的支持下面小标题3.1.13.1.7描述部分表单的新功能特性。1 输入框自动获取焦点实现在网页加载完成是，光标自动聚焦在用户需要输入的地方，比如邮箱登陆页面的输入用户名，之前我们需要在网页 onload 的时候来用 javascript 代码指定某个输入框获取焦点的做法，现在html 5直接支持在输入框中加入autofocus属性。2 文本框的输入提示实现之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息，而在HTML5中我们只需写下如下代码即可实现实现效果如图3-1所示。图3-1 输入提示示例在类型后面增加一个placeholder属性，属性的值就是提示框里的值。3 表单验证功能1）判断必填项：有些表单项是表单内必填项，和以往相比现在只需要在表单项中增加一个属性，required即可。示例代码如下：如果此项为空，则会有相应提示，效果如图3-2所示。图3-2 必填项提示图如果此项为空，则会有相应提示，2）判断数据格式在HTML5中，对数据格式的校验，也是属于内建类型，相应的表单项类型会有相应的内建验证规则，不需要我们额外编写JavaScript代码来实现。代码如下代码Input type=email 浏览器会自调用内建的Email验证代码，验证当前的输入项是法合法，效果如图3-3所示。图3-3 Email格式判断示例4 滑动块输入的实现在输入数字类型等可变值时，我们也可以通过拖动滑动块的形式来选择合适的值，特别是在选择颜色值时，拖动滑动块改变颜色的RGB值，更为直观可行。Range滑动块代码实现如下：效果如图3-4所示。图3-4 滑动块示例可以直接拖动，可以设置最小值、最大值、以及每拖动一格的步长。Min及max属性设置滑动块的最小值与最大值，Step设置滑动块拖动的步长.5 数字输入框实现除了3.1.4的滑动块可以输入数值外，HTML5还有另一种数据输入类型Number，使用此属性可以能过点击输入框后面的增加或减少小按钮来调整要输入的数值。实现代码如下：效果如图3-5所示。图3-5 数字输入示例用如此少的代码，就能实现如此有趣的功能，HTML5到来如何能不让大家心动。6 输入框下拉提示实现请看HTML5对表单下拉输入框的截图展示，由此我们输入表单的时候，可以很方便的从预设值中选择要输入的信息。下拉提示的核心代码如下： 效果如图3-6所示。图3-6 下拉提示示例可以用作现在很流行的ajax输入提示，也可以当作是一个可编辑的下拉菜单。即可自行输入，也可以直接下拉选择。但是使用用脚本代码也太过于烦索，HTML5可以很好解决这个问题。7 日期选择框实现它可以让我们很方便的使用日期选择框，不需要我们再用很复杂的JavaScript代码来实现了。该选择框的核心代码如下：Date 表单项可以让我们直接选择日期，方便我们输入日期选择框效果如图3-7所示。图3-7 日期选择框示例8 文件上传功能块实现使用此功能我们可以很轻松的上传文件代码如下：效果如图3-8所示图3-8 文件上传示例Accept是文件接受的类型，可以用*指代所以有文件2 对视频和音频的支持视频和音频是我们在互联网上使用最频烦最多的，然而网站开发人员却要因为插件不同编写大量重复性代码，对用户来说也要装多种插件，如今HTML5内建支持视频音频。1 Video属性列表W3C公布的HTML5标准草案中中的属性和描述如表3-1所示。表3-1 video属性表属性值描述autoplaytrue | false如果是 true，则视频在就绪后马上播放。controlstrue | false如果是 true，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。loopendnumeric value定义在视频流中循环播放停止的位置，loopstartnumeric value定义在视频流中循环播放的开始位置。playcountnumeric value定义视频片段播放多少次。默认是 1。posterurl在视频播放之前所显示的图片的 URL。srcurl要播放的视频的 URL。startnumeric value定义播放器在音频流中开始播放的位置。widthpixels设置视频播放器的宽度由上表可以看出，通过浏览器本身对视频的支持，能够完成常用的视频操作.2 video标签实现以下是视频在完全支持浏览器中的通用代码，通过如此简短的代码，我们便能在自己的网站上，嵌入我们的视频，丰富我们的页面。核心代码如下： 您的浏览器不支持标签！请您使用最新Firefox,Opera,Safari,Chrome浏览器观看！ 在chrome浏览器里的视频播放效果如图3-9所示。图3-9 视频播放示例视频标签的控件很简单，只有播放/暂停按钮，进度栏可以拖动先择播放，还有音量控制器。互动功能有些简单，可以通过添加额外的代码获取更多的互动控制，但是满足基本的视频播放不成问题。关于各浏览器对视频格式的支持情况请看第一章2.2.2小节各浏览器对HTML5音频视频格式的支持速查表测试显示：Firefox3.6与IE8支持不好，Chrome与Opera能很正常显示，但是支持不同的格式。3 Audio的属性W3C公布的HTML5标准草案中中的属性和描述如表3-2所示。表3-2 Audio属性表属性值描述autoplaytrue | false如果是 true，则音频在就绪后马上播放。controlstrue | false如果是 true，则向用户显示控件，比如播放按钮。endnumeric value定义播放器在音频流中的何处停止播放。loopendnumeric value定义在音频流中循环播放停止的位置loopstartnumeric value定义在音频流中循环播放的开始位置。srcurl所播放音频的 url。startnumeric value定义播放器在音频流中开始播放的位置。2 Audio标签实现以下是视频在完全支持浏览器中的通用代码您的浏览器不支持标签！请您使用最新Firefox,Opera,Safari,Chrome浏览器观看！ 对音频的支持，各浏览器较统一，除了IE外都支持MP3程式，在音频方面对的应用不会有格式的障碍。播放效果如图3-10所示。图3-10 音频播放示例关于各浏览器对音频格式的支持情况请看第一章2.2.2小节各浏览器对HTML5音频视频格式的支持速查表测试显示：Firefox3.6与IE6支持不好，Chrome与Opera能很正常显示。测试结果：IE浏览器不支持，Firefox