离线系统表单设计

在这个离线系统中，表单无疑是构成这个离线系统的视图部分，作为最前端，与客户的操作最密切相关的一块，所以我们有必要先了解一下HTML5的Forms API，它有如下特性： 

表单仍然使用Form元素作为容器，我们可以在其中设置基本的提交性质；

用户或者开发人员提交页面的时候，表单仍用于向服务器端发送表单中控件的值；

沿用之前的表单控件及其使用方法，并不断发展和增加新的控件和功能；

可以用脚本操作表单控件；

 

HTML5包含了大量的新的API和元素类型，如下：

新的输入型控件： 

类型	用途
input type=datetime	时间和日期输入框
input type=datetime-local	本地的时间和日期输入框
input type=date	日期输入框
input type=month	年月输入框
input type=time	时间输入框
input type=week	星期输入框
input type=number	数值输入框
input type=tel	电话号码输入框
input type=email	电子邮件地址文本框
input type=url	URL地址文本框
input type=search	用于搜索文本框
input type=range	特定范围的数值选择器，以进度条方式显示
input type=color	颜色选择器（这个不使用）

 

下面这些元素很多我们会在离线填报表单里面使用到,可以复制拿到Chrome浏览器里面试试看：

 

日期格式文本框： 

<p> 

<label for="date">date类型：</label>

<input type="date" id="date"><span>请在新版Chrome中查看</span> 

</p>

 

时间格式文本框： 

<p> 

<label for="time">time