258 lines
8.7 KiB
HTML
258 lines
8.7 KiB
HTML
<div class="page" data-name="form">
|
|
<div class="navbar">
|
|
<div class="navbar-inner sliding">
|
|
<div class="left">
|
|
<a href="#" class="link back">
|
|
<i class="icon icon-back"></i>
|
|
<span class="ios-only">Back</span>
|
|
</a>
|
|
</div>
|
|
<div class="title">Form</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content">
|
|
<div class="block-title">Form Example</div>
|
|
<div class="list no-hairlines-md">
|
|
<ul>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Name</div>
|
|
<div class="item-input-wrap">
|
|
<input type="text" placeholder="Your name"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">E-mail</div>
|
|
<div class="item-input-wrap">
|
|
<input type="email" placeholder="E-mail"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">URL</div>
|
|
<div class="item-input-wrap">
|
|
<input type="url" placeholder="URL"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Password</div>
|
|
<div class="item-input-wrap">
|
|
<input type="password" placeholder="Password"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Phone</div>
|
|
<div class="item-input-wrap">
|
|
<input type="tel" placeholder="Phone"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Gender</div>
|
|
<div class="item-input-wrap">
|
|
<select>
|
|
<option>Male</option>
|
|
<option>Female</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Birth date</div>
|
|
<div class="item-input-wrap">
|
|
<input type="date" placeholder="Birth day" value="2014-04-30"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content">
|
|
<div class="item-inner">
|
|
<div class="item-title">Toggle</div>
|
|
<div class="item-after">
|
|
<label class="toggle toggle-init">
|
|
<input type="checkbox">
|
|
<span class="toggle-icon"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Slider</div>
|
|
<div class="item-input-wrap">
|
|
<div class="range-slider range-slider-init" data-label="true">
|
|
<input type="range" value="50" min="0" max="100" step="1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="align-top">
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Textarea</div>
|
|
<div class="item-input-wrap">
|
|
<textarea placeholder="Bio"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="align-top">
|
|
<div class="item-content item-input">
|
|
<div class="item-inner">
|
|
<div class="item-title item-label">Resizable</div>
|
|
<div class="item-input-wrap">
|
|
<textarea placeholder="Bio" class="resizable"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="block-title">Buttons</div>
|
|
<div class="block block-strong">
|
|
<p class="row">
|
|
<a href="#" class="col button">Button</a>
|
|
<a href="#" class="col button button-fill">Fill</a>
|
|
</p>
|
|
<p class="row">
|
|
<a href="#" class="col button button-raised">Raised</a>
|
|
<a href="#" class="col button button-raised button-fill">Raised Fill</a>
|
|
</p>
|
|
<p class="row">
|
|
<a href="#" class="col button button-round">Round</a>
|
|
<a href="#" class="col button button-round button-fill">Round Fill</a>
|
|
</p>
|
|
<p class="row">
|
|
<a href="#" class="col button button-outline">Outline</a>
|
|
<a href="#" class="col button button-round button-outline">Outline Round</a>
|
|
</p>
|
|
<p class="row">
|
|
<a href="#" class="col button button-small button-outline">Small</a>
|
|
<a href="#" class="col button button-small button-round button-outline">Small Round</a>
|
|
</p>
|
|
<p class="row">
|
|
<a href="#" class="col button button-small button-fill">Small</a>
|
|
<a href="#" class="col button button-small button-round button-fill">Small Round</a>
|
|
</p>
|
|
<p class="row">
|
|
<a href="#" class="col button button-large button-raised">Large</a>
|
|
<a href="#" class="col button button-large button-fill button-raised">Large Fill</a>
|
|
</p>
|
|
|
|
<p class="row">
|
|
<a href="#" class="col button button-large button-fill button-raised color-red">Large Red</a>
|
|
<a href="#" class="col button button-large button-fill button-raised color-green">Large Green</a>
|
|
</p>
|
|
|
|
</div>
|
|
<div class="block-title">Checkbox group</div>
|
|
<div class="list">
|
|
<ul>
|
|
<li>
|
|
<label class="item-checkbox item-content">
|
|
<input type="checkbox" name="checkbox" value="Books" checked="checked"/>
|
|
<i class="icon icon-checkbox"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Books</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label class="item-checkbox item-content">
|
|
<input type="checkbox" name="checkbox" value="Movies"/>
|
|
<i class="icon icon-checkbox"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Movies</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label class="item-checkbox item-content">
|
|
<input type="checkbox" name="checkbox" value="Food"/>
|
|
<i class="icon icon-checkbox"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Food</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label class="item-checkbox item-content">
|
|
<input type="checkbox" name="checkbox" value="Drinks"/>
|
|
<i class="icon icon-checkbox"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Drinks</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="block-title">Radio buttons group</div>
|
|
<div class="list">
|
|
<ul>
|
|
<li>
|
|
<label class="item-radio item-content">
|
|
<input type="radio" name="radio" value="Books" checked="checked"/>
|
|
<i class="icon icon-radio"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Books</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label class="item-radio item-content">
|
|
<input type="radio" name="radio" value="Movies"/>
|
|
<i class="icon icon-radio"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Movies</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label class="item-radio item-content">
|
|
<input type="radio" name="radio" value="Food"/>
|
|
<i class="icon icon-radio"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Food</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label class="item-radio item-content">
|
|
<input type="radio" name="radio" value="Drinks"/>
|
|
<i class="icon icon-radio"></i>
|
|
<div class="item-inner">
|
|
<div class="item-title">Drinks</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|