超详细的php用户注册页面填写信息完整实例（附源码）

注册页面是大多数网站必备的页面，所以很有必要对自己的注册页面做些精心的设计。下面三张图，第一张是注册的展示页面，第二张思维导图就一个简单的逻辑，第三张是通过firebug查看调用的JS文件。

一、给每个输入框写下说明

在用户看到这个输入框的时候，就能非常清晰的明白这个输入框是做啥用的，最大限度的降低他们产生疑惑的可能性。我们需要假设用户毫不了解注册需要输入的内容，随后给他们足够的信息以便帮助他们理解。

 二、小图标icon

Icon是增强内容的工具，而且能给访客一个很好的暗示。以前使用小图标都是用图片，用图片的话，很多时候那些对齐、宽度高度搞起来特麻烦，这次我将图标做成字体，操作字体可比操作图片容易很多。可以到国外的一个网站icomoon制作图标字体，不过这个网站打开起来比较慢，需要耐心等待。利用在线资源，接受新思想与新技术，让工作变得越来越简单。

这些小图标都是从icomoon网站上面导出的。这种方式操作对齐，大小非常方便，不过IE6和IE7不支持选择器before（关于选择器的浏览器兼容可以参考这里），所以在这两个浏览器中将不能显示这个图标。

<font class="ficomoon icon-signup"></font>注册新用户@font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?-fl11l'); src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'), url('fonts/icomoon.woff?-fl11l') format('woff'), url('fonts/icomoon.ttf?-fl11l') format('truetype'), url('fonts/icomoon.svg?-fl11l#icomoon') format('svg'); font-weight: normal; font-style: normal;}.ficomoon{font-family:'icomoon';}.icon-print:before {content: "/e601"}

 三、输入框还可输入的字符数

过去我会给输入框设置一个最大字数的属性限制，这是一种比较粗暴的方式，因为在输入到一定字符后，突然不能输入了，感觉就像是键盘一下子失灵了，没有任何征兆。

现在通过这个设置，首先能让用户知道这里有字数限制，其次能够让用户清楚的知道何时会达到这个限制，很好的提升了友好度。这里面还做了另外一个小操作，就是在输入到一些字符后，将出现变红色，警示用户马上要超过额定字数了。