基於HTML5手機登入註冊表單代碼

標籤：

分享一款基於HTML5手機登入註冊表單代碼。這是一款滑鼠點擊註冊登入按鈕彈出表單，適合移動端使用。如下：

線上預覽    源碼下載

實現的代碼。

html代碼：

<div class="demo">        <nav class="main_nav">            <ul>                <li><a class="cd-signin" href="#0">登入</a></li>                <li><a class="cd-signup" href="#0">註冊</a></li>            </ul>        </nav>    </div>    <div class="cd-user-modal">        <div class="cd-user-modal-container">            <ul class="cd-switcher">                <li><a href="#0">使用者登入</a></li>                <li><a href="#0">註冊新使用者</a></li>            </ul>            <div id="cd-login">                <!-- 登入表單 -->                <form class="cd-form">                <p class="fieldset">                    <label class="image-replace cd-username" for="signin-username">                        使用者名稱</label>                    <input class="full-width has-padding has-border" id="signin-username" type="text"                        placeholder="輸入使用者名稱">                </p>                <p class="fieldset">                    <label class="image-replace cd-password" for="signin-password">                        密碼</label>                    <input class="full-width has-padding has-border" id="signin-password" type="text"                        placeholder="輸入密碼">                </p>                <p class="fieldset">                    <input type="checkbox" id="remember-me" checked>                    <label for="remember-me">                        記住登入狀態</label>                </p>                <p class="fieldset">                    <input class="full-width2" type="submit" value="登 錄">                </p>                </form>            </div>            <div id="cd-signup">                <!-- 註冊表單 -->                <form class="cd-form">                <p class="fieldset">                    <label class="image-replace cd-username" for="signup-username">                        使用者名稱</label>                    <input class="full-width has-padding has-border" id="signup-username" type="text"                        placeholder="輸入使用者名稱">                </p>                <p class="fieldset">                    <label class="image-replace cd-email" for="signup-email">                        郵箱</label>                    <input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="輸入mail">                </p>                <p class="fieldset">                    <label class="image-replace cd-password" for="signup-password">                        密碼</label>                    <input class="full-width has-padding has-border" id="signup-password" type="text"                        placeholder="輸入密碼">                </p>                <p class="fieldset">                    <input type="checkbox" id="accept-terms">                    <label for="accept-terms">                        我已閱讀並同意 <a href="#0">使用者協議</a></label>                </p>                <p class="fieldset">                    <input class="full-width2" type="submit" value="註冊新使用者">                </p>                </form>            </div>            <a href="#0" class="cd-close-form">關閉</a>        </div>    </div>

via：http://www.w2bc.com/Article/46115

基於HTML5手機登入註冊表單代碼