继续学习-HTML5+CSS3之表单搭建

来源：互联网发布：nginx access by lua 编辑：程序博客网时间：2024/06/04 18:28

之前的学习都是页面的一些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添加的表单类型蛮多的，这个表单包括了一些常用类型的表单，大家可以有个参考。