HTML5 为标准的 Web 表单增添了一系列新功能。
Placeholder
即占位符，通过placeholder属性实现，大部分 HTML5 浏览器都支持这一特性。再也不用麻烦 JavaScript 来完成这件事儿了。。用法：
<input name="s" placeholder="Search">Auto Focus
就是默认使光标聚焦于某一文本框，这样用户打开网页即可输入文字，不用鼠标再选择。目前 Google、百度都已经实现了这个特性。用法：
<input name="s" autofocus>datalist
datalist属性提供了一个下拉列表，直接看代码：
<input list="cars">
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>Chrome 下的效果：
Firefox 和 IE10 也支持datalist，Safari 不支持。此外，也可以给option标签增加label属性，但是目前这个属性在 Firefox 中有 bug。例如写成<option label="$43K" value="BMW">，在 Chrome 下是这个效果：
但是在 Firefox 中却变成了这样，违背了我们本来的意图：
Input types
HTML5 为input标签新增了 13 中新类型。例如，为了使用新增的email类型，只需要：
<input type="email">另外提一下兼容性问题。对于老浏览器（包括 IE 6），遇到未知的「type」时一律会当成「text」类型的来对待，所以一般来说使用新标记不会对老浏览器造成干扰。
下面来看一看这些新类型都是啥。
目前使用type="email"在大部分浏览器中还没有特殊的视觉效果。iPhone 遇到这类文本框，会在键盘中添加@和.符号。
不过，虽然没有视觉效果，但是浏览器实际上却在「验证」这些设置了type="email"的文本框里的内容是否为合法的 Email 地址。开发者可以通过 CSS:valid等特殊的伪类来人为地控制不同情况下的样式，详见后文。
url
同样，目前对于type="url"，大部分浏览器也不会添加样式；但是 iPhone 例外——对于这类文本框，你会看到键盘又变了：多了.com键。
number
对于type="number"，又多了几个属性：
<input type="number" min="0" max="100" step="25">即min指定了最小值，max最大值，step则为步长。这些属性都是可以省略的，只规定需要的部分即可。同时，HTML5 还提供了对应的几个 JavaScript 方法和变量：
input.stepUp(n);
input.stepDown(n);
input.valueAsNumber;最新的 Safari, Chrome, Opera 支持type="number"，而 Firefox 和 IE 11 部分支持。
range
range类型实际上是用一个划块表示的数字。例如：
<input type="range" min="0" max="100" step="5">所需的属性除了type之外，和上一个是完全一样的。另外，HTML 5 浏览器基本上都支持这一类型。
date, time, datetime, month, week
这一组是有关时间选择的。
<input type="date">
<input type="time">
<input type="datetime">
<input type="month">
<input type="week">
<input type="datetime-local">这些类型目前 IE 11、Firefox 和桌面版 Safari 全部不支持；iOS Safari 支持一点，Chrome 支持大部分。
search
专门用于搜索框。和一般文本框不同之处在于，Safari 和 Chrome 会把它们渲染成圆角的。并且当你输入文字之后，右面会多出来一个叉，点击叉可以清除所有文字。这和 OS X 系统的搜索框的体验是一致的。如果规定results属性，左边就会自动出现一个放大镜图标，同时 Safari 还提供「最近的搜索」原生支持。
color
这是一个颜色选取器，不支持的浏览器则会显示为一个文本框。目前我发现 Chrome 是支持的。
表单验证
根据 type 进行验证
如果你设定了某些特定的type，则支持此功能的浏览器会自动对用户输入的合法性进行验证，并在尝试提交表单时对错误的字段给出提示。下面是 Chrome 下分别设定type="email"和type="url"并填错的提示效果：
根据 min/max 进行验证
如果用户填写的数字不符合你的范围要求，则支持此功能的浏览器也会在用户尝试提交表单时给出提示。目前我只发现 Chrome 是支持的：
pattern 属性
pattern属性很强大，可以根据一个正则表达式来判断用户输入的正确与否。
<form>
<input type="text" pattern="[A-Za-z]{3}" title="Just input three letters">
<input type="submit">
</form>效果：也是 Chrome 浏览器下的效果：
目前 IE 10+、Chrome、Firefox、Opera 支持pattern属性，Safari 不支持。
required 属性
如果某个字段是必填的，可以给它添加required属性，支持这个属性的浏览器可能会做出一些外观/交互上的变化：
<input type="text" required>效果：
目前 IE 10+、Firefox、Chrome、Opera 支持required属性，Safari 不支持。
防止自动验证
如果要防止自动验证，可以对整个form使用novalidate：
<form novalidate>
<input type="email" name="email">
<!-- ..other stuff.. -->
</form>也可以对单个input使用formnovalidate：
<input type="text" formnovalidate>表单验证与 CSS
为了配合 HTML5 强大的表单验证，CSS3 中同样有几个伪类被引入，来支持对不同验证状态的表单进行选择。你可以为它们添加样式。
required 和 optional 伪类
所有含有required属性的表单元素可以被:required选取；其余元素可以被:optional选取。
valid 和 invalid 伪类
当一个输入框的内容被浏览器认为是「有效的」时，它就可以被valid伪类选取。相反，当一个输入框的内容被视为「无效的」时，既可被invalid伪类选取。
- 任何不加
required限制的空input总是有效的。 - 一个输入了任何字符的
<input required>为有效的。 - 一个输入了合法 Email 地址的
<input type="email" required>是有效的。 - 一个输入数值在限定范围内的
<input type="number" min="0" max="100" required>是有效的。等等。
in-range 和 out-of-range 伪类
这两个伪类主要针对含有「范围」含义的输入类型，例如number。
- 数值类型不合法算作
out-of-range。 - 没有规定
min和max也可能发生out-of-range（见上一种情况）。 - 数值在
min和max范围之外算作out-of-range。 - 属于
out-of-range则一定属于invalid，反之不成立（还需要是范围类的标签类型）。 - 属于
in-range则一定属于valid，反之也成立。
目前 Firefox 和 IE 不支持这两个伪类。
form 属性
这个属性的作用是使得不在form标签内的input项目属于某个form，需要用 ID 来指定。例如：
<form method="get" id="demo">
<input name="field1" type="text">
<input type="submit">
<form>
<input name="field2" type="text" form="demo">IE 11 不支持form属性，而 Safari、Chrome、Opera、Firefox 都支持。
和别的 HTML5 特性不同，表单这块浏览器的支持普遍是参差不齐的；使用的时候需要意识到这一点。对不支持的浏览器使用这些新特性基本是无害的（不会影响原来的效果），但是必要的时候要为它们提供 Fallback。
再推荐给大家一个网站：Can I Use，这里可以查到各个特性浏览器的支持情况，很方便。