copy85.flash.com超COOL的博客留言表单设计_玉惜"远航"的足迹

尽管我们大多数的博客朋友相信:内容为王！但一个拥有良好用户交涉、美观漂亮的博客界面设计也是吸引浏览者的一个要素，且容易让他们对你的博客印象深刻，让”下次再来”的机率增加了好几个百分之几点几。

毕竟，并不是每个人都是用RSS阅读器来浏览你的博客，比如我尽管订阅了一些feed，但几乎从来不看。其一是因为喜欢看每个博客的页面设计，包括布局、配色或仅仅是一个小玩意的安排，其二是我讨厌象要完成一件任务似的去看成一个博客的日志。

哎。一个日志的副标题和引语需要这么长吗？不需要吗？需要吗？

下面是Melanie Karlik收集的12联系表单，当然，也就可以用来做为博客的留言栏。都是一样的。
尽管这些联系表单并没有提供样式化的CSS代码，但如果你喜欢，想要得到它，还是非常容易的。而之所以更重要的目的是让你从中取吸灵感，结合这些联系表单的设计创意，创造出拥有你自己独特风格的菜单，给你的访问者眼前一亮。

注:点击图片即可进入该联系表单的出处。

1.整个留言框使用了一个圆角的黑色背景，输入框加以暗桔黄色的斜纹背景。而右上角又车入了一个post comments的图标做点缀。很Web2.0，很漂亮。再看最下面的绿色提交按钮，醒目就是衬托出来滴…

2.这个就是联系表单了，像一张邮票，渐变元素符合了Web2.0风格的设计。

3.给输入框配以渐变绿色，嗯，这是一个挺清新的表单。

4.整洁，干净，典雅的联系菜单设计。

5.上面那个联系表单是典雅，那这个就该说他是幽雅了。是幽雅，不是优雅。

6.这个有够简单哦。不过看到黄色区域了没有，它最大的特点就是高亮显示当前选择的输入区域行。

7.这个联系表单黑的暗调用的给人一种神秘感啊。

8.淡色背景配淡色输入框，着重突出了文字内容。

]

9.发光发亮的联系表单。

10.这里所有联系表单里面最特别的一个了吧。好好想，给你的博客留言栏也弄成这样。

11.顶部阴影把输入框显现的是凹了进去，有点3D的味道了。

12.泛黄的相片，呃，泛黄的留言框。

上面这些都是只停在欣赏阶段，必须你有一定的HTML和CSS知识才可以弄出同样效果来的。别急，你可以看看另一篇
47个优秀的Ajax/CSS 表单设计资源

表单需要有一个稳固的视觉结构，完整的层次组成元素(输入框、提示文本、提交按钮等） ，强大的技术和功能（Ajax）使表单更加易于使用并看上去更加漂亮。下面是一些Ajax效果的CSS表单，可以用来美化你的网站表单。

样式化表单
1) Uni Form

一个规范的表单，结构良好，高度可定制，交互友好，非常实用。

2) CSS-Only, Table-less Forms这是一个很好的CSS表单设计实例，使用了表格。它良好运行在 IE6/Firefox1.0+/Opeara v8.0和Safari ，尽管可能在不同的浏览器下有细微的出入，但基本不影响使用。

3) Tableless Forms一个非常漂亮的表单，例如在输入框的最左边有一个小图形，这样看起来挺精致漂亮。

Demo

4) A form with style 如何把一个难看的表单通过CSS样式化让它好看起来。

样式化表单元素

5) Niceforms 1.0

这是一个脚本，取代常用的表单元素，其中对复选框和下拉选择框的改非常值得一用，突中显示当前选择，这样看上去很友好。

6) Fancy Form

Fancyform是一个功能强大的多选框替换脚本，极具灵活性，改变了HTML表单元素的外观和功能。它不仅便于使用，并且支持各种不同的浏览器。

7) Styling form controls with CSS, revisited

使用不同的CSS规则定制出224种不同的画面显示效果的表单。

8 ) Showing Good Form - 用语义标记达到的比较简洁的CSS表单，有点像表格哦。呵呵。

Demo :

9) Styling the Button Element with Sliding Doors

一个滑动门技术和按钮美化的示例。

实用且兼容各大浏览器的表单
10) Prettier Accessible Forms

Demo :

11) Check it, don’t select it

Fancy Demo :

12) Sensible Forms

网站可用性-Roger Hudson提供了一个非常有用的教程，就如何创建一种良好布局的表单。

Ajax表单
13) AJAX Contact Form

Dustin Diaz设计的一个出色的Ajax联系表单，使用了javascript.

Demo :

14) AutoSuggest: An AJAX auto-complete text field -

这个表单比较特别的地方在于，它为文本输入框增加了一个弹出下拉菜单中的文本建议。用户可直接点击选择其中的文本建议，支持Tab键的选择。

Demo :

15) FancyUpload using Mootools - 基于Mootools构建的一个漂亮的文件上传表单。

Demo :

16) jQuery Form Plugin

使用AJAX技术让您轻松管理HTML表单，以方便从表单元素中搜集资料，确定如何来管理提交过程，让你对如何提交数据能有充分的控制权。

17) Cforms

这是一个Ajax的Wordpress联系表单插件，可以为你的博客用户联系你时提供更多的方便。

优秀的表单验证
18 ) Really Easy Field validation with Prototype - 这是一个非常简单的表单验证脚本。

Demo :

19) Live Validation

这是一个很小巧的开放源代码的Javascript效果，当用户在提交表单时，提供实时的表单验证。

20) Ajax form validation

学习如何使用Ajax技术，以便处理和校验你的表单。

21) fValidator

fValidator是一个开源免费的Javascript脚本，当用户在提交表单时，提供实时的表单验证。

表单提示信息
22) Validation Hints for your form

这篇文章将解释如何使用JavaScript和CSS达到输入提示的效果。

23) Form Help without Popups

一个新鲜的技术，为你的用户在输入表单时提供帮助信息，用不使用弹出窗口。

隐藏表单域
24) Trimming form fields

利用Javascript，DOM和CSS，让用户自主选择是否选择哪些表单内容。

Demo :

创建表单的一些技巧
25) Tips For Creating Great Web Forms

这是一篇对所有设计师来说都值得一学的表单设计技巧。