13表单

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>表单13</title>
  6         <style>
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             p{
 12                 font-size: 18px;
 13                 font-weight: bold;
 14             }
 15             #frm{
 16                 width: 600px;
 17                 margin: 60px auto;
 18             }
 19             #frm>p{
 20                 border-bottom: 1px solid #000;
 21             }
 22             #frm li{
 23                 height: 50px;
 24                 line-height: 50px;
 25                 list-style: none;
 26             }
 27             #frm li:not(:last-child){
 28                 border-bottom: 1px solid #ddd;
 29             }
 30             #frm li .tip{
 31                 display: inline-block;
 32                 width: 150px;
 33             }
 34             input.ipt,textarea{
 35                 box-shadow: 0px 0px 10px #ddd inset,0px 0px 3px #ddd;
 36                 border: 1px solid #999;
 37                 height: 20px;
 38                 width: 200px;
 39                 border-radius: 2px;
 40                 background-image: url(attention.png);
 41                 background-repeat: no-repeat;
 42                 background-position:95% calc(50% - 1px) ;
 43                 outline: none;
 44             }
 45             input.ipt:focus,textarea:focus{
 46                 width: 220px;
 47                 box-shadow: 0px 0px 5px #f00;
 48                 transition: all 0.5s;
 49                 border:1px solid #f00;
 50             }
 51             input.ipt:focus:invalid,textarea:focus:invalid{
 52                 background-image: url(warn.png);
 53             }
 54             input.ipt:valid,textarea:valid{
 55                 background-image: url(right.png);
 56                 box-shadow: 0px 0px 5px #57d34f;
 57                 border:1px solid #57d34f;
 58             }
 59             textarea{
 60                 width: 200px;
 61                 height: 100px;
 62             }
 63             #frm li.txtarea{
 64                 height: 110px;
 65             }
 66             button{
 67                 width: 100px;
 68                 height: 30px;
 69                 line-height: 30px;
 70                 background: #1DBC1B;
 71                 border: 1px solid #1F8C04;
 72                 border-radius: 2px;
 73                 box-shadow: 0 1px 0 #88ecab inset ;
 74                 color: white;
 75                 text-shadow: 0 -1px 0 #1F8C04;
 76                 font-weight: bold;
 77                 cursor: pointer;
 78             }
 79             button:hover{
 80                 background: rgba(29,188,27,0.8);
 81             }
 82             
 83         </style>
 84     </head>
 85     <body>
 86         <form>
 87             <div id="frm">
 88             <p>联系我们</p>
 89             <ul>
 90                 <li>
 91                     <span class="tip">姓名：</span>
 92                     <input class="ipt" name="xingming" required />
 93                 </li>
 94                 <li>
 95                     <span class="tip">电子邮件：</span>
 96                     <input class="ipt" name="youjian" type="email" placeholder="333@163.com" required />
 97                 </li>
 98                 <li>
 99                     <span class="tip">网站:</span>
100                     <input class="ipt" name="wangzhan" type="url"  placeholder="正确格式为:http://www.jiawin.com" required />
101                 </li>
102                 <li class="txtarea">
103                     <span class="tip">留言：</span>
104                     <textarea class="ipt" name="liuyan" rows="10" cols="10" required ></textarea>
105                 </li>
106                 <li>
107                     <button>Submit From</button>
108                 </li>
109             </ul>
110             </div>
111         </form>
112     </body>
113 </html>