Form elements allow you to create flexible and beautiful Form layout. Form elements are just well known List View but with few extensions.
Let's look at layout of single form element (form field):
<div class="list-block">
<ul>
...
<li>
<div class="item-content">
<div class="item-media">... icon here ...</div>
<div class="item-inner">
<div class="item-title label">Name</div>
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
...
</ul>
</div>
As you may see it is alsmost the same as usual List View layout but with few changes:
item-title
- single-line form element label. Should have additional "label" class. Optional element
item-input
- just contains your form input HTML element. Required element
With floating labels (Material Theme Only):
<div class="list-block">
<ul>
...
<li>
<div class="item-content">
<div class="item-media">... icon here ...</div>
<div class="item-inner">
<div class="item-title floating-label">Name</div>
<div class="item-input">
<input type="text" name="name">
</div>
</div>
</div>
</li>
...
</ul>
</div>
Here are the list of form elements that you can put inside of item-input
:
All text inputs |
Supported types: text, password, email, tel, url, date, number, datetime-local
|
Select |
|
Textarea |
Note that List View element with textarea should have additional "align-top" class on <li>:
|
Resizable Textarea |
Resiable textarea. Just add "resizable" class to textarea and it will resize automatically depending on its content
|
Switch (Checkbox) |
Switch (Checkbox) requires additional wrapper:
|
Slider (Range input) |
Slider (Range input) requires additional wrapper:
|
<div class="content-block-title">Full Layout</div>
<div class="list-block">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<div class="item-title label">Name</div>
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<div class="item-title label">E-mail</div>
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
...
<!-- Select -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<div class="item-title label">Gender</div>
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<!-- Date -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">calendar</i></div>
<div class="item-inner">
<div class="item-title label">Birth date</div>
<div class="item-input">
<input type="date" placeholder="Birth day" value="2014-04-30">
</div>
</div>
</div>
</li>
<!-- Date time-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">calendar</i></div>
<div class="item-inner">
<div class="item-title label">Date time</div>
<div class="item-input">
<input type="datetime-local">
</div>
</div>
</div>
</li>
<!-- Switch (Checkbox) -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">check</i></div>
<div class="item-inner">
<div class="item-title label">Switch</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<!-- Slider (Range input) -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">filter</i></div>
<div class="item-inner">
<div class="item-title label">Slider</div>
<div class="item-input">
<div class="range-slider">
<input type="range" min="0" max="100" value="50" step="0.1">
</div>
</div>
</div>
</div>
</li>
<!-- Textarea -->
<li class="align-top">
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">chat</i></div>
<div class="item-inner">
<div class="item-title label">Textarea</div>
<div class="item-input">
<textarea></textarea>
</div>
</div>
</div>
</li>
</ul>
</div>
Because item-title
is optional element, we can drop elements labels:
<div class="content-block-title">Icons and inputs</div>
<div class="list-block">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">person</i></div>
<div class="item-inner">
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">email</i></div>
<div class="item-inner">
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<!-- Select -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">persons</i></div>
<div class="item-inner">
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<!-- Date -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">calendar</i></div>
<div class="item-inner">
<div class="item-input">
<input type="date" placeholder="Birth day" value="2014-04-30">
</div>
</div>
</div>
</li>
<!-- Switch (Checkbox) -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">check</i></div>
<div class="item-inner">
<div class="item-input">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<!-- Slider (Range input) -->
<li>
<div class="item-content">
<div class="item-media"><i class="icon f7-icons">filter</i></div>
<div class="item-inner">
<div class="item-input">
<div class="range-slider">
<input type="range" min="0" max="100" value="50" step="0.1">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Because item-media
is optional element, we can drop elements icons:
<div class="content-block-title">Labels and inputs</div>
<div class="list-block">
<ul>
<!-- Text inputs -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Name</div>
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">E-mail</div>
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<!-- Select -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Gender</div>
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<!-- Date -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Birth date</div>
<div class="item-input">
<input type="date" placeholder="Birth day" value="2014-04-30">
</div>
</div>
</div>
</li>
<!-- Switch (Checkbox) -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Switch</div>
<div class="item-input">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<!-- Slider (Range input) -->
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-title label">Slider</div>
<div class="item-input">
<div class="range-slider">
<input type="range" min="0" max="100" value="50" step="0.1">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
Sometimes we need just inputs, so we can drop item-media
and item-title
<div class="content-block-title">Just inputs</div>
<div class="list-block">
<ul>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="text" placeholder="Your name">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="email" placeholder="E-mail">
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<select>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
</li>
<li>
<div class="item-content">
<div class="item-inner">
<div class="item-input">
<input type="date" placeholder="Birth day" value="2014-04-30">
</div>
</div>
</div>
</li>
</ul>
</div>
And because form elements is a List View, we can make it inset:
<div class="content-block-title">Just inputs</div>
<!-- "inset" class on list-block -->
<div class="list-block inset">
...
</div>