从HTML5的角度重新思考表单元素

这是一篇我在nettuts上看到的一篇文章，写得挺不错的。原文在这里：Rethinking Forms in HTML5 最近网上HTML5和Flash的口水战也不少，做为一个合格的前端了解些新知识还是很有必要的。

先来看一个传统的表单：

<input name=”form_text” id=”form_text” type=”text” value=http://www.chinahtml.com/1006/”foo” size=”10″ maxlength=”100″>

这个表单看起来相当臃肿，而且不利于特殊人群阅读网页内容。在新的HTML5规定中会有一些增加一些新的属性来完美它们，如：autofocus, autocomplete, list, required, multiple等。

自动聚焦（autofocus）

这些新属性的作用就是让它们相对的好理解。例如：

<input name=”form_text” id=”form_text” type=”text” value=http://www.chinahtml.com/1006/”foo” autofocus>

这种情况的要点就在于一旦页面加载，这个文本输入框就自动聚焦，使用户的输入更加便捷。

<input name=”form_text” id=”form_text” type=”text” value=http://www.chinahtml.com/1006/”foo” autocomplete=”off”>

这种情况，通过关闭表单自动完成功能让浏览器无法显示自动完成的效果。这就避免了因自动完成功能而输入错误内容的情况。

数据表(list)

<input name=”form_url” id=”form_url” type=”url” list=”url_list”>
<datalist id=”url_list”>
<option value=http://www.chinahtml.com/1006/”http://www.google.com” label=”Google”>
<option value=http://www.chinahtml.com/1006/”http://www.nettuts.com” label=”NetTuts”>
</datalist>

这个list属性的确很酷，当你用鼠标点击这个输入框时下面会自动显示出datalist的内容，通过点击它可以将内容自动添加到上面的输入框。这 个效果如果要用JS制作的话就会相当麻烦了。 注：建议使用新版的opero浏览些效果，如下：

多选框(multiple)

<input name=”form_url” id=”form_url” type=”url” list=”url_list” multiple>

multiple属性让大家可以调用页面中datalist中的内容(如上)，这双节省了我们用JS去写此功能的时间。

必填项(required)

<input name=”form_text” id=”form_text” type=”text” value=http://www.chinahtml.com/1006/”foo” required>

此属性表明该项目为必填项目，提交表单时如果为空则自动给出提示！完全不需要另写JS。

正则(RegEx)

<input name=”form_text” id=”form_text” type=”text” value=http://www.chinahtml.com/1006/”foo” pattern=”[0-9][A-Z]{3}”>

此属性会检查输入内容和目标正则表达式的匹配情况。

验证(Validation)

<input name=”form_range” id=”form_range” type=”range” min=”1″ max=”10″ step=”.5″ value=http://www.chinahtml.com/1006/”5″ >

当输入框类型为range时就可以定义内容的范围等相关项目。

当然以上提到的这些属性并不是每个浏览器都支持的，具体情况看下图：

更多精彩内容请阅读原文，这里只做抛砖引玉的介绍。

我想网 板凳 编辑