Form Elements

优质

小牛编辑

127浏览

2023-12-01

描述 (Description)

表单元素用于制作外观漂亮的表单布局。

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>

S.No	表单元素	结构体
1	所有文字输入	`<div class = "item-input"> <input type = "password"> </div>`
2	Select	`<div class = "item-input"> <select>...</select"> </div>`
3	Textarea	`<div class = "item-input"> <textarea></textarea> </div>`
4	Resizable Textarea	`<div class = "item-input"> <textarea class = "resizable"></textarea> </div>`
5	Switch (Checkbox)	`<label class = "label-switch"> <input type = "checkbox"> <div class = "checkbox"></div> </label>`
6	Slider (Range input)	`<div class = "item-input"> <div class = "range-slider"> <input type = "range" min = "10" max = "50" step = "0.1"> </div> </div>`

我们可以使用下表中指定的各种类型的表单元素 -

S.No	表单元素类型和描述
1	Full Layout 完整布局类型用于显示整个表单元素。
2	Icons and Inputs 您可以在表单布局中使用图标和输入字段。
3	Labels and Inputs 您可以在表单布局中使用标签和输入字段。
4	Just Inputs Framework7允许您仅使用带有表单元素的输入字段。
5	Inset 您可以使用inset类使表单元素嵌入。