Framework7 - 表單元素

描述

表單元素用於建立美觀的表單佈局。

Framework7 提供了一些表單元素，如下表所示：


<div class = "item-input">
   <input type = "password">
</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 = "10" max = "50" 
         step = "0.1">
   </div>
</div>

序號	表單元素	結構
1	所有文字輸入框	<div class = "item-input"> <input type = "password"> </div>
2	選擇框	<div class = "item-input"> <select>...</select"> </div>
3	文字區域	<div class = "item-input"> <textarea></textarea> </div>
4	可調整大小的文字區域	<div class = "item-input"> <textarea class = "resizable"></textarea> </div>
5	開關 (複選框)	<label class = "label-switch"> <input type = "checkbox"> <div class = "checkbox"></div> </label>
6	滑塊 (範圍輸入)	<div class = "item-input"> <div class = "range-slider"> <input type = "range" min = "10" max = "50" step = "0.1"> </div> </div>

我們可以在各種型別中使用表單元素，如下表所示：

序號	表單元素型別和描述
1	完整佈局完整佈局型別用於顯示整個表單元素。
2	圖示和輸入框您可以在表單佈局中將圖示與輸入欄位一起使用。
3	標籤和輸入框您可以在表單佈局中將標籤與輸入欄位一起使用。
4	僅輸入框 Framework7 允許您僅使用輸入欄位與表單元素。
5	內嵌您可以透過使用 inset 類使表單元素內嵌。

framework7_forms.htm

列印頁面

序號	表單元素型別和描述
1	完整佈局完整佈局型別用於顯示整個表單元素。
2	圖示和輸入框您可以在表單佈局中將圖示與輸入欄位一起使用。
3	標籤和輸入框您可以在表單佈局中將標籤與輸入欄位一起使用。
4	僅輸入框 Framework7 允許您僅使用輸入欄位與表單元素。
5	內嵌您可以透過使用 inset 類使表單元素內嵌。