基於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