| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <section id="form" data-transition="slide">
- <header data-title="Form Elements">
- <nav class="box">
- <a href="#back" data-router="section" data-label="Back"></a>
- </nav>
- <nav class="right">
- <a href="#" class="button" data-icon="share" data-label="Share"></a>
- </nav>
- </header>
- <article id="form-normal" class="active">
- <div class="form">
- <fieldset data-icon="plus">
- <label>To:</label>
- <input type="text" />
- </fieldset>
- <fieldset>
- <label>Cc/Cco:</label>
- <input type="text" />
- </fieldset>
- <fieldset data-icon="pencil">
- <label>Subject:</label>
- <input type="text" />
- </fieldset>
- <fieldset>
- <label>Summary:</label>
- <br/>
- <input type="text" />
- </fieldset>
- <fieldset>
- <textarea></textarea>
- </fieldset>
- <a href="#form-extras" data-router="article" class="button anchor accept" data-label="View Extra Elements"></a>
- </div>
- </article>
- <article id="form-extras" class=" scroll">
- <form>
- <fieldset data-icon="search">
- <input type="search" placeholder="Search..."/>
- </fieldset>
- </form>
- <form class="margined">
- <div class="six columns">
- <label>Address</label>
- <input type="text" placeholder="placeholder"/>
- </div>
- <div class="three columns right">
- <label>Pin Code</label>
- <input type="password" value="value" disabled/>
- </div>
- <label>Select your skill</label>
- <label class="select">
- <select class="custom">
- <option value="1">HTML5 Jedi</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </select>
- </label>
- <label>Progress</label>
- <div id="progress-normal" data-progress="25%"></div>
- <label>Range</label>
- <input type="range" placeholder="type your name" />
- <label>Checkbox</label>
- <br/>
- <input type="range" min="0" max="1" class="checkbox active" value="1">
- <a href="#form-normal" data-router="article" class="button anchor accept" data-label="Return to normal Elements"></a>
- </form>
- </article>
- </section>
|