LMLPHP后院

HTML5 的表单属性增加了很多功能，如 placeholder，pattern，multiple，autocomplete，autofocus，list，novalidate， required 等。这些新属性让网站的开发更加方面和简单。但是现实总是残酷的，若是要开发出真正用户体验非常好的网站，这些自带功能往往都是排不上用场的。

前段时间在一个网站上提交表单时 input 输入框提示 “请与所请求的格式保持一致。”，这样的提示让我不知怎么回事。于是审查元素查看到输入框的属性中含有 pattern，由于是一个邮箱字段，pattern 写的过于严格，导致不能通过校验。这样的提示对于一般的用户来说，是不会明白怎么回事的。

于是写了个小页面进行测试，发现不同的浏览器的提示内容不一样，也有部分支持 HTML5 的浏览器不支持 pattern 属性的，比如 Safari 浏览器。测试发现 Chrome 和 Firefox 都支持 pattern 属性，Chrome 浏览器的提示内容是：“请与所请求的格式保持一致。”， Firefox 的提示内容是：“请匹配要求的格式！”。

使用 pattern 属性的同时，最好是配合 title 属性一起使用，并在 title 属性中注明要求的格式，提示的时候 title 属性中的内容会出现在下方，如果不在 title 属性中注明，用户根本不知道要求的格式是什么，用户体验会非常的不好。如下代码示例：

<form>
    <input type="text" placeholder="数字" pattern="\d+" id="数字" title="必须数字哦！">
    <label for="数字">数字</label>
    <input type="submit" value="submit">
</form>

附上 Chrome 和 Firefox 运行截图：