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

Html5对表单、视频及音频功能性探索
1HTML5对表单的支持
下面小标题3.1.1~3.1.7描述部分表单的新功能特性。
1输入框自动获取焦点实现
在网页加载完成是，光标自动聚焦在用户需要输入的地方，比如邮箱登陆页面的输入用户名，之前我们需要在网页onload的时候来用javascript代码指定某个输入框获取焦点的做法，现在html5直接支持在输入框中加入autofocus属性。
<inputtype="text"id="username"name="username"autofocus/>
2文本框的输入提示实现
之前我们需要用javascript的onblur、onfocus来实现一个输入框的提示信息，而在HTML5中我们只需写下如下代码即可实现
<input type="email" id="uemail" name="uemail"
placeholder="[e-mail]"required/>
实现效果如图3-1所示。

图3-1输入提示示例
在类型后面增加一个placeholder属性，属性的值就是提示框里的值。
3表单验证功能
1）判断必填项：
有些表单项是表单内必填项，和以往相比现在只需要在表单项中增加一个属性，required即可。
示例代码如下：
<inputtype="text"id="username"name="username"requiredautofocus/>如果此项为空，则会有相应提示，效果如图3-2所示。

图3-2必填项提示图
如果此项为空，则会有相应提示，
2）判断数据格式
在HTML5中，对数据格式的校验，也是属于内建类型，相应的表单项类型会有相应的内建验证规则，不需要我们额外编写JavaScript代码来实现。
代码如下
<input type="email" id="uemail" name="uemail" placeholder="[e-mail]"required/>
代码Inputtype="email"浏览器会自调用内建的Email验证代码，验证当前的输入项是法合法，效果如图3-3所示。

图3-3Email格式判断示例
4滑动块输入的实现
在输入数字类型等可变值时，我们也可以通过拖动滑动块的形式来选择合适的值，特别是在选择颜色值时，拖动滑动块改变颜色的RGB值，更为直观可行。
Range滑动块代码实现如下：
<inputtype="range"min="1"max="100"step="10"name="s"/>
效果如图3-4所示。

图3-4滑动块示例
可以直接拖动，可以设置最小值、最大值、以及每拖动一格的步长。Min及max属性设置滑动块的最小值与最大值，Step设置滑动块拖动的步长
.5数字输入框实现
除了3.1.4的滑动块可以输入数值外，HTML5还有另一种数据输入类型Number，使用此属性可以能过点击输入框后面的增加或减少小按钮来调整要输入的数值。实现代码如下：
<inputtype=”number”/>
效果如图3-5所示。

图3-5数字输入示例
用如此少的代码，就能实现如此有趣的功能，HTML5到来如何能不让大家心动。
6输入框下拉提示实现
请看HTML5对表单下拉输入框的截图展示，由此我们输入表单的时候，可以很方便的从预设值中选择要输入的信息。
下拉提示的核心代码如下：
<inputid="search"type="url"list="searchlist"required/>
<datalistid="searchlist">
<optionvalue="HYPERLINK"http://www.google.com"http://www.google.com"label="Google"/>
<optionvalue="HYPERLINK"http://www.yahoo.com"http://www.yahoo.com"label="Yahoo"/>
<optionvalue="HYPERLINK"http://www.bing.com"http://www.bing.com"label="Bing"/>
<optionvalue="HYPERLINK"http://www.baidu.com"http://www.baidu.com"label="Baidu"/>
</datalist>
效果如图3-6所示。

图3-6下拉提示示例
可以用作现在很流行的ajax输入提示，也可以当作是一个可编辑的下拉菜单。即可自行输入，也可以直接下拉选择。但是使用用脚本代码也太过于烦索，HTML5可以很好解决这个问题。
7日期选择框实现
它可以让我们很方便的使用日期选择框