HTML5智能form表单新属性

在web网站中,表单无所不在。 它们是通过调查表、反馈页面、博客评论和购物车收集信息的重要工具。 由于使用HTML5,在线表单的功能将变得更为强大。
HTML5表单功能可以分成两类:专用的数据输入元素,例如email地址和数字,以及允许你指定是否需要条目、最小和最大值等新的属性。 一些最新版本的浏览器已经开始实现其中的许多功能。 一旦完全实现这些功能,它们将无需使用JavaScript进行客户端侧的表单验证(尽管你仍需要在服务器侧对用户输入进行安全验证)。 现在你可以立即开始实现这些功能,因为它们在设计时已经考虑到与HTML 4.01和XHTML 1.0的后向兼容性。 不能识别新的输入元素的旧版本浏览器仅仅把它们作为普通文本输入字段进行处理。 因此,除了一小点例外(range输入类型),你可以在所有的浏览器中安全地使用HTML5。
XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属表单的ID值,即可关联起来。 html5中确实添加了不少的新的属性,给我们省去了好大的功夫去判断。

智能表单使用与规范

 
<input type="email" />  … 限制用户输入email格式
<input type="url" /> … 限制用户输入网址格式
<input type="date" />  … 限制用户输入日期格式
<input type="time" />  … 限制用户输入时间格式
<input type="month" />  … 限制用户输入月份格式
<input type="week" />  … 限制用户输入周格式
<input type="number" />  … 限制用户输入数字格式
<input type="range" />  … 一个滑动条效果
<input type="search" />  … 搜索格式 results="n"
<input type="color" />  … 选择颜色格式
 

示例代码DOM:

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>智能表单</title>
<style type="text/css">
input{width:180px;height:20px;margin:5px;}
</style>
</head>
 
<body>
<form action="" method="get" id="foo">
  邮件:<input type="email" placeholder="请输入正确的邮箱地址"/><!--电子邮箱-->
  <br />
  网址:<input type="url" />
  <br />
  日期:<input type="date" />
  <br />
  月份:<input type="month" />
  <br />
  周:&nbsp;&nbsp;&nbsp;<input type="week" />
  <br />
  时间:<input type="datetime" />
  <br />
  数字:<input type="number"/>
  <br />
  滑动:<input type="range" min="0" max="100" step="1">
  <br />
  搜素:<input type="search" results="n" value="搜索">
  <br />
  颜色:<input type="color" />
  <br />
  正则表达式:<input type="text" pattern="[789]+" required />
  <br />
  <datalist id="mydata">
    <option label="top1" value="asp.net"></option>
    <option label="top2" value="C#"></option>
    <option label="top3" value="ado"></option>
    <option label="top4" value="server"></option>
    <option label="top5" value="ajax"></option>
  </datalist>
  <input type="submit" />
</form>
</body>
</html>
 

共有 0 条评论

Top