当我们在网站上注册登录还是提交评论，都需要用到表单，今天我们来分享8款最新CSS3表单，有几个效果很酷很特别，有些也非常实用，一起来看看。

1、CSS3环形特色表单 转圈切换表单焦点

这款CSS3表单非常有特色，估计各位不太会看到过，这是一款CSS3环形特色表单，整个环形由一个个输入框组成，当用鼠标激活输入框焦点时，环形圈即会转到该表单项。我们也可以用tab键来逐个选择输入框来输入表单内容。

在线演示×××

2、HTML5/CSS3联系表单 提交按钮有发光动画

好多天前我们分享过几款非常不错的CSS3表单，尤其是那款CSS3发光登录表单，更是相当绚丽。今天我们来分享一款很酷的CSS3联系表单，表单有一张很有内涵的背景图，表单充满全屏，非常大气。另外该CSS3联系表单还有一个会发光的提交按钮，非常酷。

在线演示×××

3、精美CSS3表单 CSS3带小图标表单 3款样式

之前我们介绍过3款漂亮的CSS3表单，包括一个CSS3发光表单、CSS3密码验证表单、CSS3自定义Checkbox和Radio表单。今天要向大家分享一款基于CSS3和jQuery的带小图标精美输入表单，该CSS3表单一共有3款样式，需要高版本的浏览器才能支持，不过真的是一款很酷的CSS3表单。

在线演示×××

4、纯CSS3发光登录表单

我们见过很多CSS3表单，制作都非常精美，今天介绍的这款CSS3表单不但外观华丽，而且伴有颜色发光动画。当鼠标激活表单时，表单周围就会出现颜色渐变的发光动画，配合黑色的背景，整个CSS3表单显得格外亮丽。更重要的是，这个CSS3发光表单基本用CSS3实现，很少的JS代码，在CSS3引擎上优化非常明显。

在线演示×××

5、CSS3密码强度验证表单 码速表样式

我们在网站上注册会员时，输入一个强大较大的密码会大大增加帐号安全性，那么什么样的密码才比较安全呢？这款CSS3密码强度验证表单插件可以提示你当前输入密码的安全级别，有意思的是该密码强度验证插件的样式酷似码速表，随着密码强度的加大，码速表指针就会顺时针旋转，当然旋转的特效是利用CSS3结合jQuery实现的。

在线演示×××

6、纯CSS3美化Checkbox和Radiobox按钮 外观很时尚

利用CSS3我们可以打造非常具有个性化的用户表单，今天我们就利用CSS3美化Checkbox复选框和Radiobox单选框。CSS3美化Checkbox和Radiobox的原理很简单，在页面上新建一个checkbox和radiobox并给予他们默认的label标签显示文字，然后将checkbox和radiobox隐藏，再利用CSS3来美化label标签，这样，我们就自定义了checkbox和radiobox，外观很时尚。

在线演示×××

7、HTML5分步骤注册表单 HTML5表单经典

表单在网页应用中十分重要，今天我要向大家分享一款基于HMLT5的分步骤注册表单，表单外观比较华丽，点击下一步按钮即可跳转到下一步填写注册信息。改HTML5表单使用了很多CSS3属性，从而在表单切换时拥有弹性的动画，是一款很不错的HTML5表单。

在线演示×××

8、CSS3联系表单 清新外观带美化Select表单

之前我向大家分享过一款非常绚丽的CSS3发光表单，的确是很酷，大家可以先看看。今天要分享的这款CSS3表单就比较清新简单了。表单整体看上去很干净，特别的是，该CSS3联系表单有一个自定义的美化select表单，表单项在被激活的时候边框颜色会改变。

在线演示×××

以上就是8款最新CSS3表单，欢迎收藏分享。（www.html5tricks.com）

本文由html5tricks收集整理，转载请务必保留原文链接
http://www.html5tricks.com/8-new-css3-form.html