Lungo.js/examples/test/app/sections/forms.html

<section id="forms">
    <header data-title="Forms" class="extended" data-back="home">
        <nav class="groupbar">
            <a href="#form-inputs" data-target="article" class="current">Inputs</a>
            <a href="#form-others" data-target="article">Others</a>
            <a href="#form-switchs" data-target="article">Switchs</a>
            <a href="#form-specials" data-target="article">Specials</a>
            <a href="#form-tips" data-target="article">Tips</a>
        </nav>
    </header>

    <article id="form-inputs" class="list scrollable">
        <div class="container indented">
            <ul class="form">
                <li class="anchor" data-icon="edit">Example of inputs</li>
                <li>
                    <label>type="text"</label>
                    <input type="text" placeholder="Input text"/>
                    <label>type="password"</label>
                    <input type="password" placeholder="Input password"/>
                </li>
            </ul>

            <ul class="form">
                <li class="anchor" data-icon="edit">Example of textarea</li>
                <li><textarea placeholder="Textarea sample"></textarea></li>
            </ul>

            <ul class="form">
                <li class="anchor" data-icon="edit">Example of select</li>
                <li>
                    <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="tip dark" data-icon="question small">It's a special form element you must set the label with class "select"</li>
            </ul>
        </div>
    </article>

    <article id="form-others" class="list">
        <div class="indented">
            <ul class="form">
                <li class="anchor" data-icon="edit">Example of search</li>
                <li data-search="Type a search..."></li>
                <li class="tip darker" data-icon="question small">It's a special form element you must set the attribute data-search="Placeholder text"</li>
                <li class="anchor" data-icon="edit">Example of type="*"</li>
                <li>
                    <input type="datetime" placeholder="Some datetime..." />
                    <input type="date" placeholder="Some date..." />
                    <input type="time" placeholder="Some time..." />
                    <input type="month" placeholder="Some month..." />
                </li>
                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
            </ul>
        </div>
    </article>

    <article id="form-specials" class="list">
        <div class="indented">
            <ul class="form">
                <li class="anchor" data-icon="edit">Example of progress</li>
                <li data-progress="0%"></li>
                <li class="anchor" data-icon="edit">Example of range</li>
                <li> <input type="range"></li>
                <li class="tip dark" data-icon="question small">Only for iOS5 & Android 2.3+ Devices"</li>
            </ul>
        </div>
    </article>

    <article id="form-switchs" class="list">
        <div class="container indented">
            <ul class="form">
                <li class="anchor" data-icon="edit">Example of checkbox</li>
                <li>
                    <label>Do you like LungoJS forms?</label>
                    <label class="checkbox onright"><input type="checkbox" id="checkbox-0" checked/></label>
                </li>
            </ul>

            <ul class="form">
                <li class="anchor" data-icon="edit">Example of radio</li>
                <li>
                    <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>
                    <label class="radio"><input type="radio" name="group-0" id="radio-2"/></label>
                </li>
            </ul>
        </div>
    </article>

    <article id="form-tips" class="list scrollable">
        <div class="container indented">
            <ul class="form">
                <li class="anchor">Examples of tips</li>
                <li class="tip" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
                <li class="tip dark" data-icon="home small">Lorem Ipsum is simply dummy text...</li>
                <li class="tip darker" data-icon="home small">Lorem Ipsum is simply dummy text...</li>

                <li class="tip" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
                <li class="tip dark" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
                <li class="tip darker" data-icon="home">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</li>
            </ul>

            <ul class="form">
                <li class="anchor" data-icon="home">Example of anchor</li>
                <li><label>Example of label</label></li>
            </ul>
        </div>
    </article>
</section>