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 类使表单元素内嵌。