用html5和css3建立一个友好且有趣的表单（国外网址学习）
文章中的代码片段的插件效果很好看呐！！！
看到地址：http://css-plus.com/2011/09/make-the-input-placeholder-user-friendly/
前言：略记录一下。
文章开始作者提出了一些表单不是很友好性的问题，而且又举例说明了twitter的做法：
利用HTML5的input中的placeholder属性来：
placeholder是HTML5新增的另一个属性，当input或者textarea设置了该属性后，该值的内容将作为灰字提示显示在文本框中，当文本框获得焦点时，提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现。
*：其中input中的placeholder属性和title属性起上图中的效果，但作者也提出了一个问题，当用户输入新的字符以后提示文字就消失了，有一部分的用户会感到该提示效果不持久，容易健忘。然后有了下面的label标签：
html代码：
<form id="login">
<ul>
<li>
<input id="email" name="email" placeholder="Your Email" title="Your Email" type="email" required />
<label for="email">Your Email</label>
</li>
<li>
<input id="password" name="password" placeholder="Your Password" title="Your Password" type="password" required />
<label for="password">Your Password</label>
</li>
<li>
<input id="submit" name="submit" type="submit" value="Login">
</li>
</ul>
</form>
css代码：
#login{font-size: 12px; margin: 0 auto; width: 700px;}
#login li{float: left; list-style: none; margin-left: 30px; position: relative;}
#login li:first-child{margin-left: 0;}
label{line-height: 40px; position: absolute; right: 120px; top: 0; bottom: 0;
-moz-transition: 0.3s right ease;
-ms-transition: 0.3s right ease;
-o-transition: 0.3s right ease;
-webkit-transition: 0.3s right ease;
transition: 0.3s right ease;
z-index: 0}
input{color: transparent; font-size: 12px; height: 35px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
-webkit-transition: 0.3s all ease;
transition: 0.3s all ease;}
input[type="email"], input[type="password"]{border: 1px solid #ccc; height: 35px; padding: 0 10px; width: 240px; position: relative;
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.06);
box-shadow: inset 0 0 10px rgba(0,0,0,.06);
z-index: 2;}
input[type="email"]{color: rgba(47,130,194,.8);}
input[type="password"]{color: rgba(237,28,112,.8);}
/* Placeholder */
input[type="email"]:-moz-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]:-ms-input-placeholder{color: rgba(47,130,194,.6);}
input[type="email"]::-webkit-input-placeholder{color: rgba(47,130,194,.6);}
input[type="password"]:-moz-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]:-ms-input-placeholder{color: rgba(237,28,112,.6);}
input[type="password"]::-webkit-input-placeholder{color: rgba(237,28,112,.6);}
/* Label */
input[type="email"] + label{color: rgb(47,130,194);}
input[type="password"] + label{color: rgb(237,28,112);}
input:focus + label{right: 10px;}
input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}
/* Submit */
input[type="submit"]{
background-color: #333;
background: -moz-linear-gradient(bottom, #333, #444);
background: -ms-linear-gradient(bottom, #333, #444);
background: -o-linear-gradient(bottom, #333, #444);
background: -webkit-linear-gradient(bottom, #333, #444);
background: linear-gradient(bottom, #333, #444);
border: 1px solid #222; color: #fff; cursor: pointer; height: 35px; width: 110px;
}
input[type="submit"]:hover{color: #ff6937;text-shadow: 0 0 1px rgba(255,255,255,.2);}
其中最重要的两句：
input:focus + label{right: 10px;}
input[type="email"]:focus, input[type="password"]:focus{background-color: rgba(255,255,255,.8);}
当然作者也为不支持html5的ie提供了一个解决方案：
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6 ie" lang="en"> <![endif]-->
<!--[if IE 7 ]> <html class="no-js ie7 ie" lang="en"> <![endif]-->
<!--[if IE 8 ]> <html class="no-js ie8 ie" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<script src="http://www.cnblogs.com/../js/libs/modernizr-2.0.6-min.js"></script>
其中的ie的css为：
.ie input{line-height: 35px;}
.ie input[type="email"]{color: #2F82C2;}
.ie input[type="password"]{color: #ED1C70;}
.ie label{right: 10px;}
.ie input[type="email"]:focus, .ie input[type="password"]:focus{
background:transparent;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#80ffffff,endColorstr=#80ffffff)";
zoom: 1;
}
.ie7 label, .ie6 label{display: none;}
再加上一段jquery代码：
if(!Modernizr.input.placeholder) {
$("input[placeholder]").each(function() {
var placeholder = $(this).attr("placeholder");
$(this).val(placeholder).focus(function() {
if($(this).val() == placeholder) {
$(this).val("")
}
}).blur(function() {
if($(this).val() == "") {
$(this).val(placeholder)
}
});
});
}
这样就能在多数浏览器中实现了，我没有去测试，本来是想要学习css3的，能懂就行，其中的各种兼容性纠结不用在意。
笔记：
1、利用label标签和css的position属性，z-index一个为0 一个为2。
2、focus时的绝对定位发生转变：从right120到right10.
3、其中有涉及到背景渐变、盒阴影、动画效果、css伪类、css3表达式等。
4、文章的最后一些读者也提出了问题，当文本框内的内容过多的时候会与label内容重复。且需要较长的文本框。
有人还提出可以用小图标来代替，即使内容与图标相覆盖也不会有很大的问题。这里当内容很少的时候还真可以借鉴上文的做法，总之很好玩也复习了很多css3的各种兼容性写法，也复习了很多属性代表的意思等。
最后上一张效果图：
演示地址：http://css-plus.com/examples/2011/09/userfriendly-input-placeholder/
资料参考地址：css3部分——鑫空间（css3资料较多）：http://www.zhangxinxu.com/php/
html5部分：http://www.belary.com/index.php/2011/03/10/html5-css3-search-box/ 这里面也有一个类似的效果哦。
