Lungo.js/example/app/sections/form.html

<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="#" data-router="article" 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>