Framework7 - Form Elements

Description

Form elements are used to make good looking form layouts.

Framework7 provides some form elements as specified in the table below −

S.No Form Element Structure
1 All text inputs 
<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>

We can use form elements in various types as specified in the table below −

S.No Form Element Type & Description
1 Full Layout

The full layout type is used to display the whole form element.
2 Icons and Inputs

You can use icons along with the input fields in the form layout.
3 Labels and Inputs

You can use labels along with the input fields in the form layout.
4 Just Inputs

Framework7 allows you to use only input fields with the form elements.
5 Inset

You can make the form elements inset by using the inset class.
framework7_forms.htm
Advertisements