超酷HTML5和CSS3实现的登录及其注册功能表单

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

在线演示  本地下载

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

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

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

HTML

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

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

       

           
               

Log in

               

                    Your email or username
                   
               

               

                    Your password
                   
               

               

                   
                    Keep me logged in
               

               

                   
               

               

                    Not a member yet ?
                    Join us
               

           
       

 
       

           
               

Sign up

               

                    Your username
                   
               

               

                    Your email
                   
               

               

                    Your password
                   
               

               

                    Please confirm your password
                   
               

               

                   
               

               

                    Already a member ?
                    Go and log in
               

           
       

   

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

接下来可能是俩个比较有趣的部分。你或许注意到了顶端的俩个链接。这是一个能够帮助我们的表单更加方便的使用anchor处理的小技巧，这样当我们点击切换链接并且触发:target的时候将不会跨越很长的页面。

第二个小技巧是使用icon字体。我们将会使用一个data-attribute来展示图标。通过使用对应的字符来设定data-icon="icon_charactoer"，我们只需要一个CSS属性选择器来样式化所有的图标。如果你对这个有兴趣，可以阅读：24 Ways: Displaying Icons with Fonts and Data- Attributes。

CSS

为了使得代码更加清晰，在教程里我们忽略了浏览器提供商指定的前缀， 当然你可以在对应代码中找到相关的设定。当然我们使用了很多不错的CSS3技巧可能不在所有的浏览器中生效。

....

原文来自:超酷HTML5和CSS3实现的登录及其注册功能表单

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/8288/viewspace-720822/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/8288/viewspace-720822/