一：表单布局基本格式
表单布局是通过列表来实现的。
<div class="list-block"> <ul> <!--一个表单行--> <li> <div class="item-content"> <div class="item-media">图标</div> <div class="item-inner"> <div class="item-title label">标签文字</div> <div class="item-input"> <input type="输入类型" name="字段名"> </div> </div> </div> </li> ... </ul> </div>
一个表单就是一个列表，一个表单行就是一个列表元素。表单行由 标签文字+输入 组成。
二：输入类型
|
所有文本输入 |
text, password, email, tel, url, date, number, datetime-local |
|
下拉列表 |
|
|
文本框 |
|
|
自适应文本框 |
|
|
复选框 |
|
|
进度条 |
|
三：布局示例
http://framework7.taobao.org/docs/form-elements.html#.Wo5BgCO74lU
四：单选框、复选框
单选框组需要使用list视图制作而成。
http://framework7.taobao.org/docs/checkboxes-radios.html#.Wo5-9CO74lU
五：智能选择器（高级！）
1:将列表元素转变为智能选择器，并且把选择项用select标签包裹，放进列表元素中即可。这样，在点击列表元素时，就会自动打开一个动态页面来选择内容。
<li> <!--1:将列表元素转变为智能选择器 --> <a href="#" class="item-link smart-select"> <!-- 2:提供选项 --> <select name="fruits"> <option value="apple" selected>Apple</option> <option value="pineapple">Pineapple</option> ... </select> <!-- 3:列表元素格式定义 --> <div class="item-content"> <div class="item-inner"> <div class="item-title">元素标签</div> <div class="item-after">默认选中的选项内容</div> </div> </div> </a> </li>
2:带搜索框的智能选择器：只需加data-searchbar="true"属性即可。
3:自定义选择页面的标题与返回文本：加上 data-page-title="标题" data-back-text="返回按钮文本" 即可。
4:用弹出页来打开选择页面：加上 data-open-in="popup" 即可。
5:选择后自动关闭选择页：加上 data-back-on-select="true" 即可。
6:多选：列表元素可以多选【高阶用法，少】
六：快速获取表单数据与填充表单
F7可以直接把整个表单的输入转换为json数据，也可以快速把json数据填充到表单中，而无需逐个表单字段去操作。
1:快速获取表单内容
$$(‘按钮选择器‘).on(‘click‘, function(){ var formData = myApp.formToJSON(‘#表单id‘); });
2:快速填充表单
$$(‘按钮‘).on(‘click‘, function(){ var formData = { ‘key‘: ‘value‘, 。。。。 } myApp.formFromJSON(‘#表单id‘, formData); });
七：表单存储(保存刚刚输入的内容，并且在表单重新打开时自动填充)
启用表单存储：
- 在表单上增加一个 "store-data" class。（新版中是 form-store-data 类）
- 在表单上增加一个 id 属性。如果没有 id, 表单存储无法正常工作。
- 确保input都有 "name" 属性，没有name属性的input将会被忽略(不会被填充)。
八：提交表单
有两种方法提交表单：点击submit按钮、检测表单内容变化自动提交。
1:submit
<form action="表单提交url" method="GET" enctype="内容类型" class="ajax-submit"> ... </form>
2:表单内容变化自动提交(没有设置submit按钮时)
<form action="提交url" method="GET" class="ajax-submit-onchange"> ... </form>
