表单美化验证html5+css3实现

【CSS3】
下载
新闻
文章
表单美化验证html5+css3实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表单美化验证html5+css3实现</title>
    <style type="text/css">
        *:focus {outline: none;}
        body {font: 14px/21px "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif;}
        .contact_form h2, .contact_form label {font-family:Georgia, Times, "Times New Roman", serif;}
        .form_hint, .required_notification {font-size: 11px;}
        .contact_form ul {
            list-style-type:none;
            list-style-position:outside;
            margin:0;padding:0
        }
        .contact_form li{
            padding:12px;
            border-bottom:1px solid #eee;
            position:relative;
        }
        .contact_form li:first-child, .contact_form li:last-child {
            border-bottom:1px solid #777;
        }
        .contact_form h2 {
            margin:0;
            display: inline;
        }
        .required_notification {
            color:#d45252;
            margin:5px 0 0 0;
            display:inline;
            float:right;
        }
        .contact_form label {
            width:150px;
            margin-top: 3px;
            display:inline-block;
            float:left;
            padding:3px;
        }
        .contact_form input {
            height:20px;
            width:220px;
            padding:5px 8px;
        }
        .contact_form textarea {padding:8px; width:300px;}
        .contact_form button {margin-left:156px;}
        .contact_form input, .contact_form textarea {
            border:1px solid #aaa;
            box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
            border-radius:2px;
            padding-right:30px;
            -moz-transition: padding .25s;
            -webkit-transition: padding .25s;
            -o-transition: padding .25s;
            transition: padding .25s;
        }
        .contact_form input:focus, .contact_form textarea:focus {
            background: #fff;
            border:1px solid #555;
            box-shadow: 0 0 3px #aaa;
            padding-right:70px;
        }
        .contact_form input:required, .contact_form textarea:required {
            background: #fff url('red_asterisk.png') no-repeat 98% center;
        }
        .contact_form input:required:valid, .contact_form textarea:required:valid {
            background: #fff url('valid.png') no-repeat 98% center;
            box-shadow: 0 0 5px #5cd053;
            border-color: #28921f;
        }
        .contact_form input:focus:invalid, .contact_form textarea:focus:invalid {
            background: #fff url('invalid.png') no-repeat 98% center;
            box-shadow: 0 0 5px #d45252;
            border-color: #b03535
        }
        .form_hint {
            background: #d45252;
            border-radius: 3px 3px 3px 3px;
            color: white;
            margin-left:8px;
            padding: 1px 6px;
            height: 30px;line-height: 30px;
            z-index: 999; /* hints stay above all other elements */
            position: absolute; /* allows proper formatting if hint is two lines */
            display: none;
        }
        .form_hint::before {
            content: "\25C0";
            color:#d45252;
            position: absolute;
            top:1px;
            left:-6px;
        }
        .contact_form input:focus + .form_hint {display: inline;}
        .contact_form input:required:valid + .form_hint {background: #28921f;}
        .contact_form input:required:valid + .form_hint::before {color:#28921f;}
        button.submit {
            background-color: #68b12f;
            background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
            background: -webkit-linear-gradient(top, #68b12f, #50911e);
            background: -moz-linear-gradient(top, #68b12f, #50911e);
            background: -ms-linear-gradient(top, #68b12f, #50911e);
            background: -o-linear-gradient(top, #68b12f, #50911e);
            background: linear-gradient(top, #68b12f, #50911e);
            border: 1px solid #509111;
            border-bottom: 1px solid #5b992b;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
            box-shadow: inset 0 1px 0 0 #9fd574;
            -webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
            -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
            -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
            -o-box-shadow: 0 1px 0 0 #9fd574 inset;
            color: white;
            font-weight: bold;
            padding: 6px 20px;
            text-align: center;
            text-shadow: 0 -1px 0 #396715;
        }
        button.submit:hover {
            opacity:.85;
            cursor: pointer;
        }
        button.submit:active {
            border: 1px solid #20911e;
            box-shadow: 0 0 10px 5px #356b0b inset;
            -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
            -moz-box-shadow: 0 0 10px 5px #356b0b inset;
            -ms-box-shadow: 0 0 10px 5px #356b0b inset;
            -o-box-shadow: 0 0 10px 5px #356b0b inset;
        }
        .contact_form{border:1px solid #DDDDDD;padding:10px;width:760px;margin:40px auto 0 auto;}
    </style>
</head>
<body>
<form class="contact_form" action="#" method="post" name="contact_form">
    <ul>
        <li>
            <h2>表单美化验证html5+css3实现</h2>
            <span class="required_notification">* 表示必填项</span>
        </li>
        <li>
            <label for="name">姓名:</label>
            <input type="text"  placeholder="请填写姓名" required />
        </li>
        <li>
            <label for="email">电子邮件:</label>
            <input type="email" name="email" placeholder="348736477@qq.com" required />
            <span class="form_hint">正确格式为：348736477@qq.com</span>
        </li>
        <li>
            <label for="website">网站:</label>
            <input type="url" name="website" placeholder="http://www.scscms.com" required pattern="https?://\w+\.\w+\.\w+(\/.*)?"/>
            <span class="form_hint">正确格式为：http://www.scscms.com</span>
        </li>
        <li>
            <label for="message">留言:</label>
            <textarea name="message" cols="40" rows="6" placeholder="留言内容" required ></textarea>
        </li>
        <li>
            <button class="submit" type="submit">Submit Form</button>
        </li>
    </ul>
</form>
</body>
</html>