接下来，我们开始设计页面表单的结构，我们先来看下如下图，表单的结构：
▲
可以看到，我们分为Header头部区域，Main Body的表单主区域，Footer area则是表单的底部区域。而HTML5中，实现这一切其实十分简单，如下代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contact Form</title>
</head>
<body>
<header class="body">
</header>
<section class="body">
</section>
<footer class="body">
</footer>
</body>
</html>
可以看到，在这里没有了传统的div，取而代之的是，HTML5中新的标签元素header,footer和section，这些标签中的header标签是指定了页面头部区域，section则指定了页面的主体区域，footer部分则指定了页面的尾部区域，相比div，它们的含义更加清晰，从语义上更符合使用习惯。这里同时为它们指定了css类body，以统一它们的风格。
表单部分设计
接下来看下表单部分的设计，先看下代码如下：
<label>Name</label>
<input name="name" placeholder="Type Here">
<label>Email</label>
<input name="email" type="email" placeholder="Type Here">
<label>Message</label>
<textarea name="message" placeholder="Type Here"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
下面介绍在HTML5中，input标签跟HTML4中的不同。在HTML5中，input标签同样有name和id等属性。而最大的不同，是HTML5中的type属性中，新增了很多类型，以适应用户的需求，但很遗憾的是，目前不是所有浏览器都支持这些新增的type属性，因此本文只讲解其中一些大部分浏览器都支持的新增type属性，比如其中上面例子中谈到的type=email,则是一个只允许用户输入email的文本框。即使有部分浏览器不支持email文本框的话也无所谓，因为会将其识别为一个传统的type=text的文本框，而在iOS系统上，当遇到type=email属性时，将会打开方便输入email的键盘布局，如下图所示：
▲
而在type=email标签中，请留意其中的placeholder属性，这里设置为”type here”,意思是当用户没有在这个email框输入内容时，自动会出现提示用户输入的文字，这里很好地起到提醒的作用，比用一大堆javascript编写的效果要好，如下图：
▲
