<HTML5秘籍>——第四章（构建更好的Web表单）

背景：HTML5采取了一种做法，在已有HTML表单模型基础上进行修改。在老版本浏览器使用HTML5表单也没什么问题，只不过美欧那么多增强而已。（这是件好事，因为IE10之前的版本不支持任何新的表单功能）

1.占位符：不支持placeholder属性的浏览器会忽略它;IE（IE9-之前的版本）的可能性最大。好在占位符文本并非不可或缺，没有它不会影响到表单的基本功能。

目前还没有标准的统一方式来改变站维护文本的样式，但你如果有需求，可以使用特定于浏览器的伪类(即Chrome浏览器的-webkit-input-placeholder、IE浏览器的-ms-input-placeholder和Firefox浏览器的-moz-placeholder)

注意：不要用它代替字段描述或说明。例如"您的卡背面的三位数字"，并不适合用它以占位符形式出现。可以考虑把它放在输入框下面，或者把这句话作为title属性的值

2.焦点：autofocus，应用在<input>或<textarea>元素。用了这属性之后，浏览器自己能控制焦点，它就可以在用户操作之前，先把焦点给与正确的空间

兼容性：IE10+

3.required属性：IE10+，在用户填写表单并单击提交之前，什么都不会发生。只有单击“提交”按钮，才会触发浏览器去从上到下地验证表单数据。可惜的是，目前我们不能修改验证错误后的弹出框的样式

4.novalidate属性：关闭验证

5.验证样式挂钩：

有几个新的伪类

required（必填）和optional（选填）：根据字段中是否使用了required来应用不同的样式

valid（有效）和invalid（无效）：根据控件中是否包含错误来应用不同的样式

in-range（在范围内）和out-of-range（超出范围）：根据控件的min和max属性判断输入值是否超出范围，从而为控件应用样式

input:required:invalid {
background-color: yellow;
}

required（必填）和optional（选填）：根据字段中是否使用了required来应用不同的样式

valid（有效）和invalid（无效）：根据控件中是否包含错误来应用不同的样式

6.使用正则表达式：pattern属性

[A-Z]{3}-[0-9]{3}

注意点：①正则表达式极客请听好————不必使用^和$表示要匹配字段值的开头和结尾。HTML5会自
d5be
动确保这一点。实际上，这就是说正则表达式匹配的是字段中完整的值，验证的也是整个值的有效性

②浏览器不会验证空值，要加上required属性

建议：正则表达式似乎能完美地匹配电子邮件地址。但还是建议大家也不要用正则表达式，因为HTML5专门定义了一个用于输入电子邮件地址的输入类型，当然已经内置了正确的正则表达式

7.自定义验证：setCustomValidity()方法

HTML5规定了一组JavaScript，通过它们可以知道字段是否有效（或强制浏览器验证这些字段）。其中最常用的是setCustomValidity()方法，基于这个方法可以针对特定字段编写自定义的验证逻辑，并利用HTML5的验证机制。（其实也就和自己写的时候多了HTML5的弹出窗口罢了）

首先，要检查相应字段是否有错，为此需要处理oninput事件（兼容IE9+，IE8-需要用onpropertychange事件，而且最好是用在type="text"上）oninput和onpropertychange事件

<pre name="code" class="html"><textarea id="comments" oninput="validateComments(this)" required></textarea>

<script>
function validateComments(input) {
if (input.value.length < 20) {
input.setCustomValidity("You need to comment in more detail.");
}
else {
// There's no error. Clear any error message.
input.setCustomValidity("");
}
}
</script>

和正则表达式区别：正则表达式很适合验证某些市局类型，而自定义验证逻辑却适用于任何情况

8.autocomplete属性：有些浏览器为了节省你的时间，会向你的字段中输入信息时提供最近输入的值供你选择

multiple属性：很久以来，Web开发人员一直通过为<select>元素添加multiple属性，达到让用户能选择多个列表项的目的。

但现在，可以为<input>元素添加这个属性，包括用于文件上传的file属性(但在Android上兼容性太差)和email类型

9.新的输入控件

背景：如果浏览器遇到了不认识的<input>元素类型(type属性值)，它就将其作为一个普通的文本框来处理。HTML5利用了浏览器这个默认的处理方式

目前兼容性好一点的有:type="email"、type="url"、type="range"

但有些兼容性不太清楚，还没实践过，所以不敢说,比如

type="search"：有些浏览器会自带样式，比如两端都是圆形、在搜索框中输入关键词时，一个X图标就会立刻出现在搜索框的右侧，单击可以清楚搜索框等等

type="tel"：目前，使用tel类型的控件的唯一用途是在移动浏览器中定制虚拟键盘，键盘中只包含数字，没有字母

type="number"：有了number类型的控件，浏览器就可以自动忽略非数值字符，number控件需要配合使用min和max属性，还可以通过设置step属性来表示可以接受的数值之间的间隔

type="range"（滑动条）：与number控件类似，它也可以表示整数或者小数值

另外记得空值可以通过验证，要在email控件中指定required属性

其实这些输入控件都可以大胆地去使用，当然这是在你虽然使用了这些输入控件的同时，还是用JavaScript去判断了，那么就可以达到各浏览器兼容了