超酷HTML5和CSS3實現的登陸及其註冊功能表單

日期：2012-4-6  來源：GBin1.com

在線演示  本地下載

過去咱們開發登陸和註冊功能大都使用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來提示用戶應該輸入的內容。

...

...

原文來自:超酷HTML5和CSS3實現的登陸及其註冊功能表單