|
<!-- We don't need full layout here, because this page will be parsed with Ajax-->
|
<!-- Top Navbar-->
|
<div class="navbar">
|
<div class="navbar-inner">
|
<div class="left"><a href="#" class="back link"> <i class="icon icon-back"></i><span>Back</span></a></div>
|
<div class="center sliding">Form</div>
|
<div class="right">
|
<!-- Right link contains only icon - additional "icon-only" class--><a href="#" class="link icon-only open-panel"> <i class="icon icon-bars"></i></a>
|
</div>
|
</div>
|
</div>
|
<div class="pages">
|
<!-- Page, data-page contains page name-->
|
<div data-page="form" class="page">
|
<!-- Scrollable page content-->
|
<div class="page-content">
|
<div class="content-block-title">Form Example</div>
|
<div class="list-block">
|
<ul>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-name"></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 icon-form-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>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-url"></i></div>
|
<div class="item-inner">
|
<div class="item-title label">URL</div>
|
<div class="item-input">
|
<input type="url" placeholder="URL"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-password"></i></div>
|
<div class="item-inner">
|
<div class="item-title label">Password</div>
|
<div class="item-input">
|
<input type="password" placeholder="Password"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-tel"></i></div>
|
<div class="item-inner">
|
<div class="item-title label">Phone</div>
|
<div class="item-input">
|
<input type="tel" placeholder="Phone"/>
|
</div>
|
</div>
|
</div>
|
</li>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-gender"></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>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-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>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-toggle"></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>
|
<li>
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-settings"></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>
|
<li class="align-top">
|
<div class="item-content">
|
<div class="item-media"><i class="icon icon-form-comment"></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>
|
<div class="content-block">
|
<div class="row">
|
<div class="col-50"><a href="#" class="button button-big button-fill color-red">Cancel</a></div>
|
<div class="col-50">
|
<input type="submit" value="Submit" class="button button-big button-fill color-green"/>
|
</div>
|
</div>
|
</div>
|
<div class="content-block-title">Checkbox group</div>
|
<div class="list-block">
|
<ul>
|
<li>
|
<label class="label-checkbox item-content">
|
<input type="checkbox" name="ks-checkbox" value="Books" checked="checked"/>
|
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
<div class="item-inner">
|
<div class="item-title">Books</div>
|
</div>
|
</label>
|
</li>
|
<li>
|
<label class="label-checkbox item-content">
|
<input type="checkbox" name="ks-checkbox" value="Movies"/>
|
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
<div class="item-inner">
|
<div class="item-title">Movies</div>
|
</div>
|
</label>
|
</li>
|
<li>
|
<label class="label-checkbox item-content">
|
<input type="checkbox" name="ks-checkbox" value="Food"/>
|
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
<div class="item-inner">
|
<div class="item-title">Food</div>
|
</div>
|
</label>
|
</li>
|
<li>
|
<label class="label-checkbox item-content">
|
<input type="checkbox" name="ks-checkbox" value="Drinks"/>
|
<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
|
<div class="item-inner">
|
<div class="item-title">Drinks</div>
|
</div>
|
</label>
|
</li>
|
</ul>
|
</div>
|
<div class="content-block-title">Radio buttons group</div>
|
<div class="list-block">
|
<ul>
|
<li>
|
<label class="label-radio item-content">
|
<input type="radio" name="ks-radio" value="Books" checked="checked"/>
|
<div class="item-inner">
|
<div class="item-title">Books</div>
|
</div>
|
</label>
|
</li>
|
<li>
|
<label class="label-radio item-content">
|
<input type="radio" name="ks-radio" value="Movies"/>
|
<div class="item-inner">
|
<div class="item-title">Movies</div>
|
</div>
|
</label>
|
</li>
|
<li>
|
<label class="label-radio item-content">
|
<input type="radio" name="ks-radio" value="Food"/>
|
<div class="item-inner">
|
<div class="item-title">Food</div>
|
</div>
|
</label>
|
</li>
|
<li>
|
<label class="label-radio item-content">
|
<input type="radio" name="ks-radio" value="Drinks"/>
|
<div class="item-inner">
|
<div class="item-title">Drinks</div>
|
</div>
|
</label>
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</div>
|
