HTML5 基础 - 彼岸时光(14)_H5之家 - 中国HTML5教程资源分享第一站

　　可以引用百度静态资源公共库或 Bootstrap 中文网开源项目提供的 CDN 服务，也可以使用又拍云 JavaScript 库加速服务，360 也提供了 CDN 加速服务。

　　下面是引用百度的 html5.js 文件：

[if lt IE 9]> 3 <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

　　上面的代码在浏览器低于 IE9 版本时会加载 html5shiv.js 文件，必须将其放置于 <head> 元素中，因为 IE 浏览器需要在头部加载后渲染这些 HTML5 的新元素。

　　通过本地测试，虽然低版本的浏览器可以识别这些新元素了，并且可以应用 CSS 样式，但是和 IE9+ 还是有一点差异。

12、HTML5 新的 input 类型

　　HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。

　　HTML5 新增加的输入类型有：color、search、url、email、tel、number、range、time、month、week、date、datetime、datetime-local。

　　(1)、input 类型：color

　　color 类型用在 input 字段主要用于选取颜色。

　　下面的例子，从拾色器中选择一个颜色：

选择你喜欢的颜色:

　　注意：Chrome、Firefox 和 Opera 支持 color 类型，IE 浏览器不支持。

　　在 Chrome 中点击按钮后，调用拾色器，显示如下：

(2)、input 类型：search

　　search 类型用于搜索域，比如站点搜索或 Google 搜索。

　　下面的例子，定义一个搜索字段用于输入搜索字符串：

找找看:

　　注意：使用 search 类型需要服务器端支持，目前只有 Chrome 和 Safari 支持该类型，IE 和 Firefox 不支持。

　　(3)、input 类型：url

　　url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

　　下面的例子，定义输入URL字段：

添加你的博客:

　　注意：所有浏览器都支持 url 类型，在提交表单时会自动验证输入的值，如果错误，在 Chrome 中会显示一个黄色的感叹号，提示：请输入网址，失去焦点输入框恢复默认颜色。在 Firefox 提示：请输入一个 URL，并且输入框变为浅红色，若失去焦点，输入框也会变为浅红色，如果输入 http: 失去焦点时就恢复默认颜色。在 IE 中提示：你必须输入有效 URL，并且输入框会增加一个大概2像素的轮廓，很是醒目，失去焦点输入框恢复默认颜色。

　　在所有浏览器中输入 http: ，他就认为你输入对了，这时候如果给后边接着输入汉字，就可以成功提交了。这就说明了 url 类型提交表单时自动验证很不严谨，还是不能过滤掉无效的输入，用一句话形容就是：猜中了开头，却猜不中这结局啊。所以为了防止不必要的数据，过滤无效的输入，还需要执行进一步的判断。

　　(4)、input 类型: email

　　email 类型用于应该包含 E-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效：

E-mail:

　　注意：所有浏览器都支持 email 类型，对于输入错误，提示方式和 url 类型相同，但也有亮点，值得一提，如果输入错误，在 Firefox 中只会机械式的提示一句：请输入电子邮件地址，只要不输入 @，不管你如何变换招式，他只这么一句，输入字母或者数字再输入 @，还是这一句，然后再输入一个汉字，可以成功提交了，我就呵呵了，可以看下几大邮箱提供商是如何注册邮箱的，网易和腾讯的默认的屏蔽了中文输入，新浪可以输入汉字，但是如果你输入汉字，他会提示你不能有中文。再来看一下 IE，也好不到哪去，但是相比 Firefox 就友好太多了，不过他也只会一句：你必须输入有效电子邮件地址，但是他不支持带有中文的提交，看来 Firefox 对中国的汉语言文化还是比较偏爱的，开个玩笑。这里要表扬一下 Chrome，他的自动验证功能就比较完善，并且提示很有人性化，这对于用户来说体验就比较好，比如你在输入框输入 12，他会提示：请在电子邮件地址中包括“@”，“12”中缺少“@”，然后加上 @，他会提示：请在“@”后面输入内容，“12@”不完整，再接着给后面输入一个汉字，这就可以成功提交了，看来谷歌对于中国始终都是向往的，又调皮了。