HTML5表单、一些新增的输入类型以及为不支持新特性的浏览器提供解决方案

我们先来看一下这么样一个表单：

一、一步一步来分析下代码：

<form id="redemption" method="post">
<hgroup>
<h1>Oscar Redemption</h1>
<h2>Here's your chance to set the record straight: tell us what
year the wrong film got nominated, and which film <b>should</b>
have received a nod...</h2>
</hgroup>
<!--后面的代码-->
</form>

hgroup标签：用来将h1...h6标题标签进行分组

这部分代码很简单，不过多分析，我们把注意力放在表单上，顺带提一些H5的元素.

<form id="redemption" method="post">
<!--前面的代码-->
<fieldset>
　　<legend>About the offending film (part 1 of 3)</legend>
　　<div>
　　　　<label for="film">The film in question?</label>
　　　　<input id="film" name="film" type="text" placeholder="e.g. King
　　　　Kong" required aria-required="true" >
　　</div>
　　　　<div>...</div>
　　　　<div>...</div>
　　</fieldset>

<!--后面的代码-->
</form>

fieldset标签：用于将表单进行分组

legend标签：用于给分组的表单添加一个标题

这里着重看一下：

placeholder属性：用于给表单添加一个提示文字。

required属性：可用于多种类型的输入元素，以确保表单域必须输入值。

range 、 color 、button 和 hidden 类型的输入元素则不能使用 required ，因为这几种输入类型几乎都

有默认值。

aria-required属性：WAI-ARIA技术（这个我研究的少，WAI-ARIA指无障碍网页应用。主要针对的是视觉缺陷，失聪，行动不便的残疾人以及假装残疾的测试人员。[先笑五分钟]）

建议没有特殊原因加上这个属性来方便用户。

autofocus属性：可以让表单在加载完成时就有一个表单域被默认聚焦，方便用户输入。

例如：

<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp"
autofocus>
</div>

input输入框就会获得焦点，但是需要注意的是，如果表单中多个input输入框都写了该属性，则会出现跨浏览器混乱，在chorme下会聚焦表单中最后一个输入框，在firefox下会聚焦第一个输入框。

list属性以及datalist标签：

<div>
　　<label for="awardWon">Award Won</label>
　　<input id="awardWon" name="awardWon" type="text" list="awards">
　　<datalist id="awards">
　　<select>
　　　　<option value="Best Picture"></option>
　　　　<option value="Best Director"></option>
　　　　<option value="Best Adapted Screenplay"></option>
　　　　<option value="Best Original Screenplay"></option>
　　</select>
　　</datalist>
</div>

list 属性以及对应的 datalist 元素可以让用户在输入框中开始输入值的时候，显示一组备选值。

list 属性中的值（ awards ）同时也是 datalist 元素的 id 。这样就可以让 datalist与输入项关联起来

二、HTML5 的新输入类型

（1）email

<div>
<label for="email">Your Email address</label>
<input id="email" name="email" type="email"
placeholder="dwight.schultz@gmail.com" required aria-required="true">
</div>

当提交的格式不是email时：

另外，许多移动设备会根据输入内容的类型来自动改变键盘的模式：

这是type=email时ipad的键盘模式：

（2）number

<div>
<label for="yearOfCrime">Year Of Crime</label>
<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929"
max="2015" required aria-required="true" >
</div>

（3）url

<div>
<label for="web">Your Web address</label>
<input id="web" name="web" type="url" placeholder="www.mysite.com">
</div>

同样会验证输入的url格式是否正确：

如果是一些移动设备，也会与email类似也会改变键盘模式：

（4）tel

<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758"
autocomplete="off" required aria-required="true" >
</div>

（5）search

<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>

不同浏览器渲染的样式不太一样：

chrome下：

firefox下：

（6）pattern

？？？what ¿¿¿   哈哈哈，如果你不太了解正则表达式，那我只能说不知是福。

大多数情况下，正则表达式你可以百度出来，当然最好还是学一学吧。

<div>
<label for="name">Your Name (first and last)</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA- Z]{3,30}"
placeholder="Dwight Schultz" required aria- required="true" >
</div>

这种输入框会按照指定格式验证输入的值。

（7）color

<div>
<label for="color">Your favorite color</label>
<input id="color" name="color" type="color">
</div>

日期和时间输入类型：

（1）date

<input id="date" type="date" name="date" />

（2）month

<input id="month" type="month" name="month">

（3）week

<input id="week" type="week" name="week">

（4）time

<input id="time" type="time" name="time">

 

范围滑动条：

range：

<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"
value="5" >

range的onchange事件：

< input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10"
value="5" onchange="showValue(this.value)"><span id="range">5</span>

<script>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>

 

三、如何给不支持新特性的浏览器打补丁

 上面暴露的了两个显而易见的问题：

（1）支持表单新特性的浏览器在具体实现上有所不同

（2）对完全不支持新特性的浏览器如何处理

这里提供一个库，由 Alexander Farkas编写的“Webshims Lib”（http://afarkas.github.com/webshim/demos/）
它可用于插入表单补丁（也可以为其他 HTML5特性打补丁），从
而使不支持新特性的浏览器可以处理 HTML5 表单。

使用方法：

a.下载 Webshims Lib（http://github.com/aFarkas/webshim/downloads）并解压；

b.将其中的 js-webshim 文件夹复制到相应的位置；

<script src="js/jquery-1.7.1.js"></script>
<script src="js-webshim/minified/extras/modernizr- custom.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
//加载补丁
$.webshims.polyfill();
</script>