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

发表时间:2010-06-22内容来源:站长资讯收集整理

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

先来看一个传统的表单:

<input name=”form_text” id=”form_text” type=”text” value=”foo” size=”10″ maxlength=”100″>

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

自动聚焦(autofocus)

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

<input name=”form_text” id=”form_text” type=”text” value=”foo” autofocus>

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

<input name=”form_text” id=”form_text” type=”text” value=”foo” autocomplete=”off”>

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

数据表(list)

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

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

listdate

多选框(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=”foo” required>

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

正则(RegEx)

<input name=”form_text” id=”form_text” type=”text” value=”foo” pattern=”[0-9][A-Z]{3}”>

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

验证(Validation)

<input name=”form_range” id=”form_range” type=”range” min=”1″ max=”10″ step=”.5″ value=”5″ >

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

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

form_input_elements

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

我想网 板凳 编辑

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。

文章评论

共有 位CH网友发表了评论 查看完整内容