zoukankan      html  css  js  c++  java
  • 基于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>

    源码下载

  • 相关阅读:
    【计算机网络】网络地址转换NAT
    红黑树
    引用和取地址区别
    [网络编程] TCP、UDP区别以及TCP传输原理、拥塞避免、连接建立、连接释放总结
    操作系统大端模式和小端模式
    点乘和叉乘
    HMM模型
    Application_Start
    跨函数使用内存空间
    框架
  • 原文地址:https://www.cnblogs.com/sprine/p/4692244.html
Copyright © 2011-2022 走看看