Ultra-detailed PHP user registration page Fill in the information complete example (attached source) _php instance

The registration page is a must for most Web sites, so it is necessary to do some careful design of your own registration page. The following three pictures, the first one is the registration of the display page, the second mind map is a simple logic, the third is to view the call through the Firebug JS file.

One, write the instructions for each input box

When the user sees this input box, they can clearly understand what the input box is for, and minimize the likelihood of confusion. We need to assume that the user has no knowledge of the content to be entered, and then give them enough information to help them understand.

Second, small icons icon

Icon is a tool for enhancing content and can give visitors a good hint. Used to use small icons are pictures, with pictures, many times those aligned, the width of the height of the special trouble, this time I will make the icon font, operation of the font can be much easier than the operation of the picture. Can go to a foreign site Icomoon make icon font, but this site is relatively slow to open up, need to wait patiently. Take advantage of online resources, embrace new ideas and technologies, and make work easier.

These small icons are all exported from the Icomoon website. This mode of operation alignment, size is very convenient, but IE6 and IE7 does not support the selector before (about the selector browser compatibility can refer to here), so in both browsers will not display this icon.

Register new user @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"}

Three, the input box can also enter the number of characters

I used to give the input box a maximum number of characters limit, this is a rough way, because after the input to a certain character, suddenly can not input, it feels like the keyboard suddenly failure, there is no sign.

Now through this setting, you can first let the user know that there is a word limit, the second can let users know when it will reach this limit, a good increase in friendliness. This also made another small operation, is the input to some characters, will appear to turn red, warning users to more than the rated number of words immediately.

This is a poka-yoke concept, meaning to prevent mistakes, there are two meanings: detection mechanism and prevention mechanism.

By adding a simple character counter, you can turn a potential error into another "just common sense" moment of the original use of this product.

function _textlimit (options, value) {var length = Value.length; var color = Options.normal; var remind = Options.len-le Ngth; if (Remind > 0 && remind <= options.limit) {color = options.warnning;} if (Remind < 0) {var txt = $ (' # ') + Options.inputid); Txt.val (value.substr (0, Options.len)); remind = 0; }  $ (' # ' + options.digitalid). HTML (Remind). css ({"Color": Color, "font-size": Options.fontsize});}

Iv. input correctness and errors give feedback

In addition to displaying friendly hints immediately when an error is detected, it is also important to tell the user that "everything is fine".

Imagine that when you are eager to ask someone for some information, you are definitely hoping to get a response right away.

When the user enters the correct time, should indicate, give them a green tick, encourage, when the input error, give them a red difference, tell them the wrong reason, let them make the corresponding changes. Here the tick and the difference I use the icon font, the alignment of the time is particularly convenient.

Five, the mailbox to do automatic matching

This automated mailbox matching can reduce user input errors and improve user input efficiency. Let the user be "doing the right thing". The red in the drop-down list highlights the difference between the match value and the input value, which is easy to identify.

From the Internet to find the relevant JS script code, and then made a little bit of change, integrated into my code. Here is a small part of a super-Full mailbox automation matching the article share to everyone: "jquery to achieve mailbox AutoFill prompt function"

Six, password strength

Password strength detection is to give users a good-natured reminder, I hope that users of their own information has a stronger protective psychology. So even if the password is weak, it should not affect data submission. The three levels below will display different prompts that will prompt the user to increase the password strength, or encourage the user to further the password strength, or to confirm the strength of the password.

Password strength on the internet has a lot of plugins, but this time I write CSS, and then do my own matching intensity, this is to be better integrated into my Site page. Different intensities show different color blocks with hints.

Regex.checkpwdstrong = function (str) {//Password strength is strong var rule =/^ (? =.{ 8,}) (? =.*[a-z]) (? =.*[a-z]) (? =.*[0-9]) (? =.*\w). *$/g; return Rule.test (str);}; Regex.checkpwdmedium = function (str) {//Password strength is medium var rule =/^ (? =.{ 7,}) (((? =.*[a-z]) (? =.*[a-z)) | ( (? =.*[a-z]) (? =.*[0-9])) | ((? =.*[a-z]) (? =.*[0-9])). *$/g; return Rule.test (str);}; Regex.checkpwdpoor = function (str) {//Password strength is weak var rule =/(? =.{ 6,}). */g; return Rule.test (str);};

. pwd_complex{padding:5px 0;height:15px}.pwd_complex Span{height:6px;width:80px;margin-right:5px;display: inline-block;border:1px solid #c2c2c2; Overflow:hidden}.pwd_complex strong{border:1px solid #45ac07; background:# 61cc1f}.pwd_complex. Strong_word{color: #45ac07}.pwd_complex. medium{border:1px solid #45ac07; background: #9AF518}. Pwd_complex. Medium_word{color: #61cc1f}.pwd_complex poor{border:1px solid #FF9C3A; background: #FFCA92}.pwd_complex . Poor_word{color: #FF9C3A}

Here, we recommend a super-Full mailbox password strength verification of the article to share to everyone: "jquery Judge password strength Verification Code"

Seven, control registration button

Check and uncheck I would have done is another effect, is not selected when the button will be registered immediately hidden, but the back feel inappropriate, if the user accidentally removed the box, the button suddenly disappeared, will make users doubt, there may be they terminate the registration or refresh the page, re-enter the corresponding content, No matter what kind of action you do, it will make users feel unhappy.

And then I thought of turning the button gray, and the disabled input in HTML is grayed out by default, taking advantage of some of the user's habits. Let the button exist on the page, suggesting that the user has not completed the operation, it is actually possible to add a few tips, clear where not done, I lazy did not do that kind of hint.

Terms of service below I marked a bit with a dotted line, and in the move up to show the icon of the hand, suggesting that users can click here, click on the terms of service popup a content layer, which is the protocol content, I did not open a new page that kind of reminder, I think this time the user's attention should be concentrated in the current page, Instead of opening a new window, and then browsing the information there, he distracted his attention, and there was a new window browser and a label, which made up the place.

viii. Final Verification

When I click the Submit button, will use the JS script to do the final verification, to prevent the error message submitted to the server side, if there is no input to meet the requirements, there will be a small hand to the wrong input box next to, and do the animation effect of moving back and forth. A moving error message, I believe that can be more attractive to the user's attention, and then make the corresponding changes. Using the new technology of CSS3, I have been trying to apply something that has already been learned to the actual operation, which is just a try. This animated tip is still rough, but it gives me a new idea. The only thing that feels complicated is that the CSS code is a lot bigger all of a sudden.

This animation is in control of the value of the Margin-left, do move back and forth.

. cssanimations. ico_prompt{-moz-animation-duration:. 7s;-moz-animation-name:prompt_hand;- Moz-animation-iteration-count:infinite;  -moz-animation-direction:alternate; -webkit-animation-duration:. 7s; -webkit-animation-name:prompt_hand; -webkit-animation-iteration-count:infinite;  -webkit-animation-direction:alternate; -o-animation-duration:. 7s; -o-animation-name:prompt_hand; -o-animation-iteration-count:infinite;  -o-animation-direction:alternate; -ms-animation-duration:. 7s; -ms-animation-name:prompt_hand; -ms-animation-iteration-count:infinite;  -ms-animation-direction:alternate; Animation-duration:. 7s; Animation-name:prompt_hand; Animation-iteration-count:infinite; Animation-direction:alternate;} @keyframes Prompt_hand {from {margin-left:10px} to {Margin-left:2px}}@-moz-keyframes Prompt_hand {from {Margin-left : 10px} to {Margin-left:2px}}@-webkit-keyframes Prompt_hand {from {margin-left:10px} to {margin-left:2px}}@- O-keyframes Prompt_hand {from {margin-left:10px} to {Margin-left:2px}@-ms-keyframes Prompt_hand {from {margin-left:10px} to {margin-left:2px}} 

Nine, button marker

The text inside the button can be written as a normal "submit" word, also can work normally. But a more obvious button tag can help the user build expectations of the click Results, letting the user know exactly where I clicked with my finger and what the results would be.

X. Do anti-duplication submission restrictions

Finally, after the user clicks on the submission, I will have a rotating circle appear, can not only imply that the user system is being submitted, please wait patiently, but also prevent users to repeat the submission of the server. Generally experienced users see this circle will be aware of being submitted, but for inexperienced users, can do better. I just do a circle layer effect, in fact, here the "register now" a few words can be changed after the click "Registration Submission" and other prompts, so that users can more clearly know what is the situation.

To accomplish this, I used the plugin spin, which was compatible with each browser. It is shown before Ajax commits, and the wait layer is removed after the AJAX response.

Showajaxloading:function (BTN) {var left = $ (BTN). Offset (). left; var top = $ (BTN). Offset (). top; var width = $ (btn). Width ( ); var height = $ (btn). Height (); var opts = {Lines:9,//The number of lines to draw length:0,//The length of each line width:10,//The line Thickne SS Radius:15,//The radius of the inner circle corners:1,//Corner roundness (0..1) rotate:0,//the rotation offset Direction:1,//1:clockwise, -1:counterclockwise color: ' #000 ',//#rgb or #rrggbb or array of colors speed:1,//Roun DS per Second trail:81,//Afterglow percentage shadow:false,//Whether to render a shadow Hwaccel:false,//Whether T o Use hardware acceleration className: ' Spinner ',//The CSS class to assign to the spinner zindex:2e9,//The Z-index (d Efaults to 2000000000) Top: ' 50% ',//top position relative to parent left: ' 50% '//left position relative to parent}; $ (' #ajax_spin '). Remove (); $ (' body '). Append ('); $ (' #ajax_spin '). css ({' Top ': Top, ' left ': Left, ' width ': width, ' heiGht ': height});  var target = document.getElementById (' Ajax_spin_inner '); var spinner = new Spinner (opts). Spin (target); }

This registration page is one of my initial ideas, after a new experience, will continue to make changes.

The above steps may not be the best solution in some cases, so the most appropriate modification in the actual situation. No best, only better.

I want to do a goal is that when the user enters this page, it is very easy to complete the various input boxes, very comfortable and smooth completion of the various boxes.

Attached source download Address: PHP User registration page Fill in the information complete example

The above is the whole content of this article, I hope that everyone's study has helped.

