用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)
            }
        });
    });
}