在线演示 本地下载
过去我们开发登录和注册功能大都使用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来提示用户应该输入的内容。
接下来可能是俩个比较有趣的部分。你或许注意到了顶端的俩个<a href>链接。这是一个能够帮助我们的表单更加方便的使用anchor处理的小技巧,这样当我们点击切换链接并且触发:target的时候将不会跨越很长的页面。
第二个小技巧是使用icon字体。我们将会使用一个data-attribute来展示图标。通过使用对应的字符来设定data-icon="icon_charactoer",我们只需要一个CSS属性选择器来样式化所有的图标。如果你对这个有兴趣,可以阅读:24 Ways: Displaying Icons with Fonts and Data- Attributes。
CSS
为了使得代码更加清晰,在教程里我们忽略了浏览器提供商指定的前缀, 当然你可以在对应代码中找到相关的设定。当然我们使用了很多不错的CSS3技巧可能不在所有的浏览器中生效。
俩个表单的样式
首先我们配置容器的样式:
#subscribe,
#login{
position: absolute;
top: 0px;
width: 88%;
padding: 18px 6% 60px 6%;
margin: 0 0 35px 0;
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189,0.8);
box-shadow:
0pt 2px 5px rgba(105, 108, 109, 0.7),
0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
border-radius: 5px;
}
#login{
z-index: 22;
}
这里我们添加了一个漂亮的盒式阴影(box shadow)来创建2个阴影:一个inset用来创建内部蓝色,还有一个外部阴影。这里我们稍微解释一下z-index。
...
内容太多无法都粘贴,有兴趣的可以去原文查看。
分享到:
相关推荐
超酷HTML5和CSS3实现登录及注册功能表单.pdf
HTML5+CSS3超酷动态表单 表单高亮时候输入框会随着变化
HTML5+CSS3超酷动态表单 HTML5+CSS3超酷动态表单网页特效.zip
超酷html5+CSS3绿色发光搜索框表单提交.zip
超酷的登录注册表单3D翻转切换css3特效.zip
2、HTML5/CSS3发光搜索表单 超酷CSS3表单 之前我们分享过一款纯CSS3实现的发光登录表单,发光特效非常不错。今天我们要再来分享一款放光表单,是一款CSS3发光搜索表单,表单整体是黑色的风格,搜索框被激活时,...
CSS3实现分步骤进行的注册表单效果,比如完成一个步骤后,提示点击下一步,然后再下一步,而无需新开网页,用本HTML5网页所演示的技术,你就可实现这种类似的表单功能,而且本表单的设计界面也是超酷的哦。
超酷CSS3发光搜索框表单提交.zip
很酷炫的web 前段技术,里面都是源码,可以直接使用。
纯CSS3实现超酷扁平风格按钮特效是一款带有3D效果,粗边框按钮效果,只带边框不带背景的按钮效果以及阴影按钮效果等
HTML5超酷表单展示效果.zip
1、HTML5/CSS3仿Facebook登录表单 利用CSS3制作的登录表单的确很漂亮,我们在html5tricks网站上也分享过几款了,比如CSS3密码强度验证表单可以显示密码的强度,这款纯CSS3发光登录表单更是绚丽多彩。今天我们要分享...
jQuery CSS制作超酷的动态按钮
这是一款使用使用CSS3 线性渐变来制作的超酷彩色3D按钮样式。这组按钮分为不同的颜色,尺寸和圆角,使用时只需要添加相应的class类即可,简单实用。
checked.css是一款能够制作复选框和单选按钮点击动画的CSS3动画库。它内置23种动画特效,在用户点击单选按钮或复选框时会出现相应的动画效果。
5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越火线游戏网 8.JS经典3款风格QQ客服在线浮动右侧与左侧...
jQuery超酷动态弹出表单 jQuery超酷动态弹出表单网页特效.zip