一：表單布局基本格式

表單布局是通過列表來實現的。

<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>

一個表單就是一個列表，一個表單行就是一個列表元素。表單行由 標簽文字+輸入 組成。

二：輸入類型

...
  <div class="item-input">
    <input type="text">
  </div>                    
...

...
  <div class="item-input">
    <select>...</select">
  </div>                    
...

...
  <div class="item-input">
    <textarea></textarea>
  </div>                    
...
 

...
  <div class="item-input">
    <textarea class="resizable"></textarea>
  </div>                    
...

...
  <label class="label-switch">
    <input type="checkbox">
    <div class="checkbox"></div>
  </label>
...

...
  <div class="item-input">
    <div class="range-slider">
      <input type="range" min="0" max="100" step="0.1">
    </div>
  </div>                    
...

三：布局示例

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> 

Framework7學習筆記之 表單