个人认为表单是HTML5的最大改进之一，它也被业界称为web form 2.0，这种称呼是名副其实的，从HTML3.2(1997年1月)到HTML4(1997年12月)，旧的表单陪伴了我们十几年，始终没有太大的改进。HTML5表单不仅仅大大的改进了表单的功能，改进了表单的语义化，同时也是对用户体验的一次增强，而对前端开发者来说，HTML5表单也可以大大增加工作效率。

不多说了，看PPT：

关于HTML 5表单的几个要点：

• 浏览器遇到不支持的input type的时候，会将其解析为默认的text，所以在项目中可以大胆的使用相应的type；
• mobile webkit对range type的支持不完善，可能是因为它对css appearance的支持不足；
• W3C只规范了HTML 5表单的内容，并没有定义其实现方式，各浏览器实现的UI出现差异成为一种必然；

如果你对HTML5表单有疑问或更好的认识和经验，欢迎通过评论提出～～

PS:发现现在Chrome dev版本也开始支持HTML5表单中的日期类型了，这和PPT中有点儿出入 @2010/8/8

网站表单是允许用户和网站进行交互的主要方式。无论是注册一项服务、在日志上发表评论、或者通过基于网页的客户端比如Gmail写邮件——表单是现代网站和网站应用的重要成分。

在本辑展示中，你将能看到一批出色的 和良好建构的 网站表单设计 ，你可以从中找到如何制作和设计迷人和令人印象深刻的HTML表单的灵感和创意。

1. Alexandru Cohaniuc

2. Tea Round App

3. Grooveshark

4. Substrakt

5. Matt

6. Pixelight Creative

7. Ballpark

8. MAQUINA studio

9. nclud

10. MonAssoc

11. Komodo Media

12. AllDevJobs.com

13. Connect

14. TVI

15. Webgrapes

16. Headscape

17. Digg

18. Graphik.fi

19. CollabFinder

20. Digitalmash

21. Kontain

22. SocialSnack

23. Mint

24. BBC

25. Media Temple

有的网站没有“联系我们”页面，有些网站只有一个email超级连接，而且有些网站还将Email地址做成图片来避免垃圾邮件。这些做法都会掩盖了联系表单的潜力和优势。

接受来自于你的网站的用户的反馈、纠正甚至是投诉是很有用的。

请不要低估联系表单的作用，它是每个网站必备的。

我们收集了24个联系表单页面设计，希望你能喜欢并能从中获取灵感。

http://www.berttimmermans.com/

http://www.mbdragan.com/

http://www.basilgloo.com/

http://www.alexcohaniuc.com/

http://www.timvandamme.com/

http://surftown.dk/

http://www.veboolabs.com/

http://www.popularfront.com/

http://www.delugestudios.com/

http://mormon.org/

http://www.northern-classics.de/

http://www.substrakt.co.uk/

http://www.northern-classics.de/

http://www.kevadamson.com/

http://events.carsonified.com/

http://www.engageinteractive.co.uk/

http://sprockethouse.com/

http://paramoreredd.com/

http://www.bcandullo.com/

http://www.forgetfoo.com/

http://www.kurtnoble.com/

http://headscape.co.uk/

http://digitalmash.com/

http://www.hotel-oxford.ro/#locatie

将输入框，选择框和文本框全部包含进 label 元素，并全部设置为块级元素。将单选按钮和多选框显示方式设置为 inline 以便于它们在同一行出现。如果你比较喜欢 label 和单选按钮/多选框出现在不同行，可以选择不把它包含在 label 里面，或者使用硬换行处理。
每种情况都在下面展示了。

当这些看起来比较时髦的时候，W3C 事实上已经含蓄地展示了他们的 label 例子。

主要好处：简单

代码：

label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
<form> <fieldset>
<legend>Contact Form</legend>

<label for="name">
Name</label>
<input id="name" name="name" size="20" />

<label for="email">Email</label>
<input id="email" name="email" size="20" />

<label for=" Choices"> Choices (radio) — <em>wrapped label</em></label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
<label style="margin-bottom: 0pt;" for=" Choices2"> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label>
<input name=" Choice2" type="checkbox" /> Choice 1
<input name=" Choice2" type="checkbox" /> Choice 2
<input name=" Choice2" type="checkbox" /> Choice 3
<div style="height: 10px;"><!-- just to split the demo up --></div>
<label for=" Choices3"> Choices (checkbox) — <em>wrapped, hard line-break</em></label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3

<label for="dropdown">
Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

<label for="message">
Message
<textarea cols="36" rows="12" name="message"></textarea>
</label>
<input type="submit" value="send it" />

</fieldset>
</form>

运行结果：

技术2：懒人

许多开发者采用了这种不正统但是快速简单（用换行隔断标记）的方法。虽然能运行，但是对你的 css 能力有害，因为你不需要任何 css 去实现它。

主要好处：快速
代码：

<form> <fieldset>
<legend>Contact Form</legend>

<label for="name">Name</label>
<input id="name" name="name" size="20" /> <label for="email">Email</label>
<input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

<label for="message">Message</label>
<textarea cols="36" rows="12" name="message"></textarea>
<input type="submit" value="send it" />

</fieldset>
</form>

运行结果：

技术3：语义先生

web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。

主要好处： 结构化

代码：

ol {
list-style: none;
padding-left: 0;
}
<form> <fieldset>
<legend>Contact Form</legend>
<ol>
	<li> <label for="name">Name</label>
<input id="name" name="name" size="20" /></li>
	<li> <label for="email">Email</label>
<input id="email" name="email" size="20" /></li>
	<li> <label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3</li>
	<li> <label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3</li>
	<li> <label for="dropdown">Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select></li>
	<li> <label for="message">Message</label><textarea cols="36" rows="12" name="message"></textarea></li>
	<li>
<input type="submit" value="send it" /></li>
</ol>
</fieldset>
</form>

运行结果：

技术4：分而治之

假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 div，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。

主要好处：空间的利用

代码：

label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
<form> <fieldset>
<legend>Contact Form</legend>
<div class="form-column">

<label for="name">
Name</label>
<input id="name" name="name" size="20" />

<label for="email">
Email</label>
<input id="email" name="email" size="20" />

<label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3</div>
<!-- /form-column -->
<div class="form-column">

<label for=" Choices3"> Choices (radio)</label>
<input name=" Choice2" type="radio" /> Choice 1
<input name=" Choice2" type="radio" /> Choice 2
<input name=" Choice2" type="radio" /> Choice 3

<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice2" type="checkbox" /> Choice 1
<input name=" Choice2" type="checkbox" /> Choice 2
<input name=" Choice2" type="checkbox" /> Choice 3

<label for="dropdown">
Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

<input type="submit" value="send it" /></div>
<!-- /form-column -->

</fieldset>
</form>

运行结果：

技术5：老学究似的懒人

如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。

主要好处：直观

代码：

<form> <fieldset>

<legend>Contact Form</legend>
<table border="0">
<tbody>
<tr><!-- column one -->
<td><label for="name">Name</label>
<input id="name" name="name" size="20" /> <label for="email">Email</label>
<input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3</td>
<!-- column two -->
<td><label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select></td>
<!-- column three -->
<td><label for="message">Message</label>
<input type="submit" value="send it" /></td>
</tr>
</tbody></table>
</fieldset>
</form>

运行结果：

原文地址：http://trif3cta.com/blog/entry/xhtml-css-web-forms-5-simple-techniques/

很棒很全的网页表单模板，页面的分类和导航设计的也很棒。

URL：http://wufoo.com/gallery/