表单在网页中扮演着十分重要的作用，从用户登录注册到留言评论，都离不开表单。一个设计精美方便的表单，可以提高用户交互的质量。下面给大家介绍10款设计简单但是外观精美的jQuery和CSS3表单，希望对大家有所帮助。

1、发光的HTML5表单

这是一款非常漂亮的HTML5登陆表单，当表单获取焦点时，表单四周就会呈现出发光动画的效果，并不断地进行颜色渐变；当表单失去焦点时，停止发光。其中颜色渐变的动画只有基于webkit的浏览器才有效果，比如chrome和safari。

2、带滑动条、日历、取色器等常用功能的HTML5表单

这是一款非常经典的CSS3&HTML5表单，我之所以称之为经典，是因为在这个表单中集成了不少我们开发中常用的控件，比如Slider 滑动条、数字框、日历、取色器、url地址框、email地址框，不像有些CSS3表单，纯粹是外观上比较迷人但功能却不是很丰富。就外观上而言，这个 CSS3表单也非常不错，还算大气。

这个CSS3表单主要用到了Webforms2,Modernizr, jQuery UI以及其他的jQuery插件

3、HTML5 CSS3表单

4、jQuery和CSS3的多步骤注册表单

这是一款基于jQuery和CSS3实现的多步骤注册表单，当用户注册时，该表单将引导用户分步完成注册信息的填写并作注册信息的合法性验证，每一个注册环节都会在下面的进度条中体现出来，在IE8及以上浏览器中测试通过，IE6应该也支持的，大家可以帮忙试试。

5、5个精美实用的CSS3留言表单

在很多网站中，我们经常会用到留言功能，留言一般会让用户填写昵称、电子邮箱、网站和留言信息，如何设计一款漂亮的留言表单？下面分享5个比较精美的CSS3留言表单供大家参考。

6、HTML5 CSS3联系表单

7、HTML5和CSS3登录表单

这是一款基于HTML5和CSS3的登录表单，非常简洁而又美观。该HTML5表单所用到的HTML 5的特性：

◆ placeholder – 输入框的简短提示，当该输入框获得输入焦点时，该提示信息自动消失
◆ required – 指定该输入元素是否必须提供
◆ autofocus – 指定输入框是否在页面加载完毕自动获取输入焦点
◆ type=”password” – 指定密码输入(非HTML5专有)

8、简单美观的CSS3登录表单

这是一款基于CSS3的简单美观的登录表单，仅仅用几行简洁的CSS3代码，就能打造出一个非常实用的登录表单，一起来看看吧。

9、基于jQuery的仿Twitter下拉登录表单

这是一个基于jQuery的仿Twitter的下拉登录表单，让用户直接可以在当前页面登录而不用跳转到另外的登录页面，另外由于可以展开和折叠，也并不会占用太大空间。

10、下拉菜单表单

以上就是设计比较简单精美的CSS3和jQuery表单，

转载请注明出处：html5_dev的专栏

下面要给大家分享8款非常个性化的jQuery和CSS3菜单，这些菜单由于外观比较独特，所以也许不是非常通用，但是我们可以认可的是这些菜单的设计思路非常棒，值得借鉴。下面一起来看看这些菜单吧。

1、超酷的jQuery动画菜单

这是一款效果非常酷的jQuery动画菜单导航，当你把鼠标移到菜单项的时候，将会出现十分平滑的滑动效果，这个菜单漂亮的地方还在于菜单的背景图片，动画本身并不复杂，下面就一起来看看这个简单漂亮的jQuery动画菜单吧。

2、jQuery侧边固定停靠导航

这是一款非常精美的jQuery侧边固定停靠导航菜单，鼠标移入移出是都有流畅的弹入弹出效果，并能固定在浏览器一侧，不随着滚动条下拉而下滑。

3、jQuery和CSS3图片下拉菜单

这是一款基于jQuery和CSS3的图片下拉菜单，当鼠标移到菜单项上时，菜单上就会弹出一张该菜单项的主题图片，并以下拉的方式显示该菜单项的具体说明。下拉过程十分流畅。

4、CSS3 动画导航按钮

这是一组基于CSS3的动画导航按钮，该动画导航会在鼠标移上去之后播放一段对应的小动画，效果十分时尚。不过注意的是，该动画导航只能在基于WebKit的浏览器上才能运行，如Chrome。下面就一起来看看这款CSS3导航。

5、丝带状的CSS导航

这是一款利用纯CSS实现的丝带状的导航菜单，该CSS导航简单而又大方，犹如悬挂在蓝天之上，又仿佛倒映在碧水之中，确实是一个让人看了赏心悦目的CSS导航。

6、CSS3仿Windows 7的开始菜单

这是一款用纯CSS3实现的仿Win 7的开始菜单。如果我们分解这个Windows 7开始菜单，我们会得到1个div，2个ul列表，1组链接以及一些icon小图标，我们可以一起来看看具体的效果。

7、jQuery动画菜单jStackmenu

jStackmenu是一款基于jQuery的堆栈式动画菜单，当你用鼠标点击那个“爱心”按钮时，jStackmenu菜单就会以堆栈方式弹出或者收拢，并呈现出流畅的动画特效。

8、银白色的CSS3导航菜单

这是一款纯CSS3制作的导航菜单，这个银白色的菜单在朦胧夜空的衬托下显得格外亮丽。当鼠标滑过导航时，每个菜单项又会呈现不同的效果，整体上，这款CSS3导航菜单非常简单而又具有立体感。

以上就是8款个性化的jquery和css3菜单导航，喜欢的朋友可以收藏。