持续学习-HTML5+CSS3之表单搭建
日期：2014-05-17 浏览次数：20737 次
继续学习-HTML5+CSS3之表单搭建
之前的学习都是页面的一些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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
