Facebook登录表单js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 Facebook登录表单js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Facebook登录表单</title>
  <link rel="stylesheet" href="css/style.css">
  <!--[if lt IE 9]><script src="js/html5.js"></script>
<![endif]-->
</head>
<body>
  <form class="login" onsubmit="return false">
    <h1>Facebook</h1>
    <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>
    <input type="password" name="password" class="login-input" placeholder="Password">
    <input type="submit" value="Login" class="login-submit">
    <p class="login-help"><a href="#">Forgot password?</a></p>
  </form>
</body>
</html>

JS代码(html5.js):

/* HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed Uncompressed source:https://github.com/aFarkas/html5shiv*/
(function(l,f){
	function m(){
	var a=e.elements;
	return"string"==typeof a?a.split(" "):a}
function i(a){
	var b=n[a[o]];
	b||(b={
}
,h++,a[o]=h,n[h]=b);
	return b}
function p(a,b,c){
	b||(b=f);
	if(g)return b.createElement(a);
	c||(c=i(b));
	b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);
	return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}
function t(a,b){
	if(!b.cache)b.cache={
}
,b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
	a.createElement=function(c){
	return!e.shivMethods?b.createElem(c):p(c,a,b)}
;
	a.createDocumentFragment=Function("h,f","return function(){
	var n=f.cloneNode(),c=n.createElement;
	h.shivMethods&&("+m().join().replace(/\w+/g,function(a){
	b.createElem(a);
	b.frag.createElement(a);
	return'c("'+a+'")'}
)+");
	return n}
")(e,b.frag)}
function q(a){
	a||(a=f);
	var b=i(a);
	if(e.shivCSS&&!j&&!b.hasCSS){
	var c,d=a;
	c=d.createElement("p");
	d=d.getElementsByTagName("head")[0]||d.documentElement;
	c.innerHTML="x<style>article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{
	display:block}
mark{
	background:#FF0;
	color:#000}
</style>";
	c=d.insertBefore(c.lastChild,d.firstChild);
	b.hasCSS=!!c}
g||t(a,b);
	return a}
var k=l.html5||{
}
,s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={
}
,g;
	(function(){
	try{
	var a=f.createElement("a");
	a.innerHTML="<xyz></xyz>";
	j="hidden"in a;
	var b;
	if(!(b=1==a.childNodes.length)){
	f.createElement("a");
	var c=f.createDocumentFragment();
	b="undefined"==typeof c.cloneNode||"undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}
g=b}
catch(d){
	g=j=!0}
}
)();
	var e={
	elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup main mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){
	a||(a=f);
	if(g)return a.createDocumentFragment();
	for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;
	d<h;
	d++)c.createElement(e[d]);
	return c}
}
;
	l.html5=e;
	q(f)}
)(this,document);

CSS代码(style.css):

body{font:12px/20px 'Lucida Grande',Verdana,sans-serif;color:#404040;background:#ebc9a2;}
input,textarea,select,label{font-family:inherit;font-size:12px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.login{margin:20px auto;padding:18px 20px;width:200px;background:#3f65b7;background-clip:padding-box;border:1px solid #172b4e;border-bottom-color:#142647;border-radius:5px;background-image:-webkit-radial-gradient(cover,#437dd6,#3960a6);background-image:-moz-radial-gradient(cover,#437dd6,#3960a6);background-image:-o-radial-gradient(cover,#437dd6,#3960a6);background-image:radial-gradient(cover,#437dd6,#3960a6);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);box-shadow:inset 0 1px rgba(255,255,255,0.3),inset 0 0 1px 1px rgba(255,255,255,0.1),0 2px 10px rgba(0,0,0,0.5);}
.login > h1{margin-bottom:20px;font-size:16px;font-weight:bold;color:white;text-align:center;text-shadow:0 -1px rgba(0,0,0,0.4);}
.login-input{display:block;width:100%;height:37px;margin-bottom:20px;padding:0 9px;color:white;text-shadow:0 1px black;background:#2b3e5d;border:1px solid #15243b;border-top-color:#0d1827;border-radius:4px;background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,0.35),rgba(0,0,0,0.2) 20%,rgba(0,0,0,0));-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 1px rgba(255,255,255,0.2);}
.login-input:focus{outline:0;background-color:#32486d;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6);box-shadow:inset 0 1px 2px rgba(0,0,0,0.3),0 0 4px 1px rgba(255,255,255,0.6);}
.lt-ie9 .login-input{line-height:35px;}
.login-submit{display:block;width:100%;height:37px;margin-bottom:15px;font-size:14px;font-weight:bold;color:#294779;text-align:center;text-shadow:0 1px rgba(255,255,255,0.3);background:#adcbfa;background-clip:padding-box;border:1px solid #284473;border-bottom-color:#223b66;border-radius:4px;cursor:pointer;background-image:-webkit-linear-gradient(top,#d0e1fe,#96b8ed);background-image:-moz-linear-gradient(top,#d0e1fe,#96b8ed);background-image:-o-linear-gradient(top,#d0e1fe,#96b8ed);background-image:linear-gradient(to bottom,#d0e1fe,#96b8ed);-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);box-shadow:inset 0 1px rgba(255,255,255,0.5),inset 0 0 7px rgba(255,255,255,0.4),0 1px 1px rgba(0,0,0,0.15);}
.login-submit:active{background:#a4c2f3;-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);box-shadow:inset 0 1px 5px rgba(0,0,0,0.4),0 1px rgba(255,255,255,0.1);}
.login-help{text-align:center;}
.login-help > a{font-size:11px;color:#d4deef;text-decoration:none;text-shadow:0 -1px rgba(0,0,0,0.4);}
.login-help > a:hover{text-decoration:underline;}
::-moz-focus-inner{padding:0;border:0;}
:-moz-placeholder{color:#bcc0c8 !important;}
::-webkit-input-placeholder{color:#bcc0c8;}
:-ms-input-placeholder{color:#bcc0c8 !important;}

附件:下载该文件资源,减少时间成本(增值服务)