继续学习-HTML5+CSS3之表单搭建
之前的学习都是页面的一些HTML5+CSS3。还没有涉及表单Form的处理。下面就为大家展示HTML5与CSS3配合下强大的表单表现和处理。
优点：使用HTML5来进行表单验证，可以尽可能的加快网页处理速度。
缺点：支持的浏览器有限。
话不多说，先上图，看看效果吧：
还是之前写的网站，今天下午加入了一个新的页面，这个页面在点击“QUOTES”后出现的quotes.html
@-webkit-keyframes notice {0%{border: 2px solid hsla(0, 97%, 53%, 1);}50%{border: 2px solid rgba(210, 254, 61, 1);}100%{border: 2px solid hsla(0, 97%, 53%, 1);}}hgroup h1{font-size:3.175em;margin:0px;padding:0px;text-transform:uppercase;font-family:Arial, Helvetica, Verdana, sans-serif;text-shadow:0.05215656em 0.05215656em 0em #dad7d7, 0 1px 0 hsla(0, 0%, 100%, 0.75);}hgroup h2{margin:1.06382978%;display:block;padding:0px;font-size:1em;font-family:Arial;text-transform:uppercase;color:#000000;line-height:1.052631579em;}input, textarea, select{border:2px solid #BFBFBF;padding:0.2em;font-size:1.1em;line-height:1.2em;background:#FFFFFF;background:-webkit-linear-gradient(top, #FFFFFF 0%,#EDEDED 8%, #FFFFFF 100%);border-radius: 4px;box-shadow: 2px 2px 5px hsla(0, 0%, 16.66666667, 0.1);}input:hover, textarea:hover, select:hover{-webkit-animation: notice 3s infinite ease-in;}input:required{border: 2px solid rgba(253,8,8,0.39);}input:focus:invalid{background: url("image/cross.png") no-repeat right;padding-right:3px;}input:focus:valid{background: url("image/tick.png") no-repeat right;padding-right:3px;}fieldset{margin: 3.18382978%;margin-left:0px;margin-right:0px;padding: 1.06382978%;border: dashed 1px red;border-radius:8px;overflow: auto;box-shadow: 2px 2px 5px hsla(0, 0%, 16.666667%, 0.3);}fieldset legend{font-size:1em!important;color:#555555;font-style:italic;}fieldset div{overflow:auto;margin-top:2.6%;}fieldset div textarea{float:right;width:23%;height:60px;font-size:0.8em;}fieldset div input{float:right;width:23%;}fieldset p label{float:left;width:73%;color:black!important;text-transform:none!important;}#content form input[type="submit"]{font-family:Arial, Helvetica, Verdana, sans-serif;font-size:1.15em;text-transform:uppercase;background-color:#B01C20;border-radius:8px;color:white;padding:0.8461538%;float:right;background: -webkit-linear-gradient(90deg, #B01C20 0%, #F15C60 100%);margin-top:30px;box-shadow:5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);text-shadow:0px 1px black;border:1px solid #BFBFBF;-webkit-transition-property: border, color, text-shadow;-webkit-transition-duration: 2s, 3s, 3s;-webkit-transition-timing-function:ease;-webkit-transition-delay:0s;}#content form input[type="submit"]:hover{border: 1px solid #000000;color:#000000;text-shadow: 0px 1px white;}