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

<section id="form" data-transition="slide">
    <header data-title="Form Elements" data-back="chevron-left">
        <nav class="on-right">
            <button data-label="test"></button>
            <button data-icon="edit"></button>
        </nav>
    </header>

    <nav data-control="groupbar">
        <a href="#" data-view-article="form-normal" data-label="Normal" class="active"></a>
        <a href="#" data-view-article="form-indented" data-label="Indented"></a>
        <a href="#" data-view-article="form-special" data-label="Specials"></a>
    </nav>

    <article id="form-normal" class="scroll">
        <div class="form">
            <!-- LABEL + INPUT -->
            <fieldset>
                <label>label</label>
                <input type="text" placeholder="value">

                <label>label</label>
                <input type="text" placeholder="value on right" class="text align_right error">

                <label class="absolute">label</label>
                <input type="text" placeholder="value on center" class="large text  bold align_center">

                <label>label</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>label</label>
                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
            </fieldset>


            </fieldset>
            <!-- INPUT -->
            <fieldset>
                <input type="text" id="description" class="text align_center" placeholder="value"/>
            </fieldset>
            <fieldset>
                <textarea placeholder="Write something..."></textarea>
            </fieldset>
            <fieldset>
                <label class="select">
                    <select class="custom">
                        <option value="1">HTML5 Jedi</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>
            </fieldset>

            <fieldset>
                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
            </fieldset>

            <fieldset>
                <label class="anchor">label Lorem ipsum dolor sit amet</label>
                <input type="checkbox" class="inline right" />
                <input type="checkbox" checked>

                 <!-- <div data-control-checkbox="check" class="inline right"></div> -->
             </fieldset>

            <fieldset data-icon="plus">
                <label>label</label>
                <input type="text" value="value" />
            </fieldset>
        </div>
    </article>

    <article id="form-indented" class="indented scroll">
        <div class="form">
            <!-- LABEL + INPUT -->
            <label>label +  input</label>
            <fieldset class="radius shadow">
                <label>label</label>
                <input type="text" placeholder="value">

                <label>label</label>
                <input type="text" placeholder="value on right" class="text align_right error">

                <label class="absolute">label</label>
                <input type="text" placeholder="value on center" class="large text align_center">

                <label>label</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>label</label>
                <input type="date" class="align_right" placeholder="Select date" value="10/04/1980"/>
            </fieldset>

            <!-- INPUT -->
            <label>input</label>
            <fieldset class="radius-top">
                <input type="text" id="description" class="text align_center" placeholder="value"/>
            </fieldset>
            <fieldset>
                <textarea placeholder="Write something..."></textarea>
            </fieldset>
            <fieldset>
                <label class="select">
                    <select class="custom">
                        <option value="1">HTML5 Jedi</option>
                        <option value="2">Two</option>
                        <option value="3">Three</option>
                    </select>
                </label>
            </fieldset>


            <fieldset>
                <label class="anchor">label Lorem ipsum dolor sit amet</label>
                <div data-control-checkbox="check_indent" class="inline on-right"></div>
             </fieldset>


            <fieldset class="radius-bottom shadow">
                <input type="date" class="align_right" placeholder="Select finish" value="10/04/1980"/>
            </fieldset>


            <label>label + input +  icon</label>
            <fieldset data-icon="plus">
                <label>label</label>
                <input type="text" value="value" />
            </fieldset>
        </div>
    </article>

    <article id="form-special" class="indented scroll">
        <div class="form" >
            <label>Specials</label>
            <fieldset data-icon="search">
                <input type="search" placeholder="Search..."/>
            </fieldset>


            <label>Address</label>
            <input type="text" placeholder="placeholder" class="border" />
            <input type="text" placeholder="placeholder" class="border error" value="error" />
            <input type="text" placeholder="placeholder" class="border success" value="success" />

            <div class="layout horizontal">
                <div data-layout="third">
                    <label>Address</label>
                    <input type="text" placeholder="placeholder" class="border" />
                </div>
                <div data-layout="primary">
                    <label>Pin Code</label>
                    <input type="password" value="value" class="border" disabled/>
                </div>
            </div>

            <label>Select your skill</label>
            <label class="select border">
                <select>
                    <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" min="0" max="8" />

            <br/>

            <button class="anchor margin-bottom" data-label="Normal"></button>
            <button class="anchor accept margin-bottom" data-icon="ok" data-label="Accept"></button>
            <button class="anchor cancel margin-bottom" data-icon="remove" data-label="Cancel"></button>
            <button class="anchor warning margin-bottom" data-icon="remove" data-label="Warning"></button>
            <button class="anchor color margin-bottom" data-icon="plus" data-label="Color"></button>
            <button class="anchor disabled" data-label="Disabled"></button>
        </div>
    </article>
</section>