柠檬铺

在线演示本地下载 

过去我们开发登录和注册功能大都使用javascript来实现，今天我们介绍的这个登录及其注册表单不走常人路，使用纯CSS3和HTML5来实现同样的功能。

这里我们使用CSS3的伪类:target。我们使用CSS3和图标字体。主要的想法是展示登录表单并且提供一个链接可以转向注册表单。

请大家注意这里只是一个简单的演示，不是所有的浏览器都支持:target，如果你需要在产品环境中使用，你需要使用对应的代码来处理对于老浏览器支持的fallback。

HTML

在html代码中，我们构建俩个表单并且把第二个表单隐藏。如下：

<div id="container_demo" >

    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->

    <a class="hiddenanchor" id="toregister"></a>

    <a class="hiddenanchor" id="tologin"></a>

    <div id="wrapper">

        <div id="login" class="animate form">

            <form  action="mysuperscript.php" autocomplete="on">

                <h1>Log in</h1>

                <p>

                    <label for="username" class="uname" data-icon="u" > Your email or username </label>

                    <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>

                </p>

                <p>

                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>

                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />

                </p>

                <p class="keeplogin">

                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />

                    <label for="loginkeeping">Keep me logged in</label>

                </p>

                <p class="login button">

                    <input type="submit" value="Login" />

                </p>

                <p class="change_link">

                    Not a member yet ?

                    <a href="#toregister" class="to_register">Join us</a>

                </p>

            </form>

        </div>



        <div id="register" class="animate form">

            <form  action="mysuperscript.php" autocomplete="on">

                <h1> Sign up </h1>

                <p>

                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>

                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />

                </p>

                <p>

                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>

                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/>

                </p>

                <p>

                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>

                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>

                </p>

                <p>

                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>

  <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>

                </p>

                <p class="signin button">

                    <input type="submit" value="Sign up"/>

                </p>

                <p class="change_link">

                    Already a member ?

                    <a href="#tologin" class="to_register"> Go and log in </a>

                </p>

            </form>

        </div>

    </div>

</div>

我 们在这里添加了HTML5相关元素，并且使用了一些新的输入控件。input=password自动隐藏用户输入。input=email使得浏览器检查 是否用户输入是正确的email。同时我们添加了require=required属性。支持这个属性的浏览器将不允许用户递交表单除非所有的输入区域都 是正确，大家可能注意到这里不需要使用javascript。autocomplete=on属性将会基于用户输入预先的填入内容。我们同时也可以使用一 些不错的placeholder来提示用户应该输入的内容。