之前的学习都是页面的一些HTML5+CSS3。还没有涉及表单Form的处理。下面就为大家展示HTML5与CSS3配合下强大的表单表现和处理。
优点：使用HTML5来进行表单验证，可以尽可能的加快网页处理速度。
缺点：支持的浏览器有限。
话不多说，先上图，看看效果吧：
还是之前写的网站，今天下午加入了一个新的页面，这个页面在点击“QUOTES”后出现的quotes.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>And the winner isn't</title> <link href="reset.css" rel="stylesheet"/> <link href="style.css" rel="stylesheet"/> <link href="form.css" rel="stylesheet"/> </head> <body> <div id="wrapper"> <!-- the header and navigation --> <header role="banner"> <div id="headline"> <span>AND THE WINNER IS</span><span id="special_hint">N'T...</span> </div> <nav role="navigation"> <ul> <li><a href="#">WHY?</a></li> <li><a href="#">SYNOPSIS</a></li> <li><a href="#">STILLS/PHOTOS</a></li> <li><a href="#">VIDEOS/CLIPS</a></li> <li><a href="quotes.html">QUOTES</a></li> <li><a href="#">QUIZ</a></li> </ul> </nav> </header> <div id="main" role="main"> <!-- the siderbar --> <aside> <section role="complementary"> <h1>UNSUNG HEROES...</h1> <a href="#"><img src="image/cableGuy.jpg" alt="CableGuy"/></a> <a href="#"><img src="image/chicago.jpg" alt="Chicago"/></a> </section> <section role="complementary"> <h1>OVERHYPED<br>NONSENSE...</h1> <a href="#"><img src="image/goonies.jpg" alt="Goonies"/></a> <a href="#"><img src="image/kingKong.jpg" alt="KingKong"/></a> </section> </aside> <!-- the content --> <div id="content"> <hgroup> <h1>oscar redemption</h1> <h2>here's your chance to set the record straight:tell us what year the wrong film got nominated,and which film should have received a nod...</h2> </hgroup> <form action="test.html" method="post" id="redemption"> <fieldset> <legend>About the offending film(part 1 of 3)</legend> <div><label for="film">The film in question?</label> <input type="text" name="film" id="film" placeholder="e.g. King Kong" required aria-required="true"/></div> <div><label for="year">Year Of Crime</label><input type="number" name="year" id="year" min="1999" max="2015" required/></div> <div><label for="awardWon">Award Won</label> <input type="text" name="awardWon" id="awardWon" list="awards"> <datalist id="awards"> <select> <option value="Best Picture"></option> <option value="Best Director"></option> <option value="Best Adapted Screenplay"></option> <option value="Best Original Screenplay"></option> </select> </datalist> </div> <div><label for="lReason">Tell us why that's wrong?</label><textarea name="lReason" id="lReason"></textarea></div> <div><label for="lRate">How you rate it(1 is woeful, 10 is awesomesauce)</label> <input id="lRate" name="lRate" type="range" min="1" max="10" value="5"/> </div> </fieldset> <fieldset> <legend>What should have won?(part 2 of 3)</legend> <div><label for="win_film">The film that should have won?</label> <input type="text" name="win_film" id="win_film" placeholder="e.g. Cable Guy" required aria-required="true"/></div> <div><label for="wReason">Tell us why it should have won?</label><textarea name="wReason" id="wReason"></textarea></div> <div><label for="wRate">How you rate it(1 is woeful, 10 is awesomesauce)</label></div> </fieldset> <fieldset> <legend>About you?(part 3 of 3)</legend> <div><label for="name">Your Name</label><input type="text" placeholder="Dwight Schultz" name="name" id="name"/></div> <div><label for="phone">Telephone(so we can berate you if you're wrong)</label><input type="tel" name="phone" id="phone" placeholder="1-234-567876"/></div> <div><label for="email">Your Email address</label><input type="email" name="email" id="email" placeholder="dwight@gmail.com" required/></div> <div><label for="webADD">Your Web address</label><input type="url" name="webADD" id="webADD" placeholder="http://www.mysite.com"/></div> </fieldset> <input type="submit" value="submit redemption"/> </form> </div> </div> <!-- the footer --> <footer role="contentinfo"> <div id="notation">NOTE:OUR OPINION IS ABSOLTELY CORRECT.YOU ARE WRONG,EVEN IF YOU THINK YOU ARE RIGHT.THAT'S A FACT.DEAL WITH IT.</div> <div id="footimg"></div> </footer> </div> </body> </html>
为了区分之前写的那个页面，我重新弄了一个css，form.css：
@-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;
}HTML5添加的表单类型蛮多的，这个表单包括了一些常用类型的表单，大家可以有个参考。