| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 |
- <section id="form" data-transition="slide">
- <header data-title="Form Elements" data-back="home"></header>
- <footer>
- <nav class="with-labels">
- <a href="#form-normal" data-target="article" class="current" data-icon="user" data-label="Normal" data-count="5"></a>
- <a href="#form-extra" data-target="article" data-icon="users" data-label="Extra" data-count="2"></a>
- </nav>
- </footer>
- <article id="form-normal" class="list indented">
- <ul>
- <li>
- <label>Example of text</label>
- <input type="text" placeholder="type your name" />
- </li>
- <li>
- <label>Example of textarea</label>
- <textarea placeholder="type your name"></textarea>
- </li>
- <li>
- <label>Example of select</label>
- <label class="select">
- <select class="custom">
- <option value="1">One</option>
- <option value="2">Two</option>
- <option value="3">Three</option>
- </select>
- </label>
- </li>
- <li class="padding">
- <label>Example of radio</label>
- <br/>
- <label class="radio"><input type="radio" name="group-0" id="radio-0" checked="checked"/></label>
- <label class="radio"><input type="radio" name="group-0" id="radio-1"/></label>
- </li>
- <li class="padding">
- <label>Do you like Lungo forms?</label>
- <label class="checkbox right"><input type="checkbox" id="checkbox-0" checked/></label>
- </li>
- </ul>
- </article>
- <article id="form-extra" class="list indented">
- <ul>
- <li class="padding">
- <label>Example of progress</label>
- <div id="progress-normal" data-progress="25%"></div>
- </li>
- <li>
- <label>Example of range</label>
- <input type="range" placeholder="type your name" />
- </li>
- </ul>
- </article>
- </section>
|