Super Detailed PHP User registration page Fill in the information complete example (source code) _php instance

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

First, write down the instructions for each input box

When users see this input box, they can clearly understand what this input box is for, and minimize the likelihood that they will have doubts. We need to assume that the user has no idea what the registration needs to enter, and then give them enough information to help them understand.

Two, small icon

Icon is a tool to enhance the content, but also give visitors a good hint. Used to use small icons are pictures, with pictures, many times those alignment, width height to make a special trouble, this time I will be made into fonts, the operation of the font can be compared to the operation of the picture a lot easier. Can go to a foreign website Icomoon make icon font, but this site open up more slowly, need to wait patiently. Take advantage of online resources and accept new ideas and technologies to make work easier and simpler.

These small icons are all exported from the Icomoon Web site. This is a very convenient way to operate, but IE6 and IE7 do not support selector before (this is a reference to browser compatibility for selectors), so this icon cannot be displayed in both browsers.

<font class= "Ficomoon icon-signup" ></font> 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

In the past I will give the input box to set a maximum number of words of the attribute limit, this is a more brutal way, because after the input to a certain character, suddenly can not enter, it feels like the keyboard suddenly failed, there is no sign.

Now, with this setting, you can first let the user know that there is a word limit here, and second can let the user know when the limit will be reached, a good promotion of friendliness. This is also done in another small operation, that is, in the input to some characters, will appear red, warning users to exceed the rated number of words immediately.

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

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

function _textlimit (options, value) {
 var length = value.length;
 var color = options.normal;
 var remind = Options.len-length;
 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 of correct and error are given feedback

It is also important to tell the user that "everything is OK" in addition to displaying the friendly prompt immediately when an error is detected.

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

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

. Ico_correct{color: #01b60e; margin-left:10px;font-family: ' Icomoon '; vertical-align:middle;font-size:1.25em}
. ico_correct:before {content: "\f00c"}
. Ico_error{color: #ff0000; margin-left:10px;font-family: ' Icomoon '; VERTICAL-ALIGN:MIDDLE;FONT-SIZE:1.25EM}
. ico_error:before {content: "\f00d"}
 

e-mail to do automatic matching

This kind of mailbox Automation match, can reduce the user's input error, also can improve the user input efficiency. Let the user be "doing the right thing". The red in the Drop-down list highlights the difference between the matching 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 series and a super Full mailbox automation matching article to share with you: "JQuery implementation of mailbox automatic filling prompt function"

Six, the strength of the password

Password intensity detection is to give users a kind of reminder, I hope users have more strong protection of their own psychological information. So even if the password is weak, it should not affect data submission. Three levels below will display different prompts, prompting the user to increase the password strength, or encourage the user to further the password strength, or confirm the strength of the password.

Password strength on the internet there are a lot of plug-ins, but this time I write my own CSS, and then do the matching intensity, this is done in order to better integrate 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 small make up again to recommend a super Full mailbox password strength verification of the article to share to everyone: "jquery judgement password strength Verification Code"

Vii. Control Registration button

Check and uncheck I would have done another effect, is not selected when will immediately register this button to hide, but later felt that improper, if the user accidentally will check the box to cancel, the button suddenly disappeared, will make the user puzzled, may they terminate the registration or refresh the page, re-enter the corresponding content, No matter what kind of operation you do, it will make users feel unhappy.

I think of the back of the button dimmed, in the HTML is disabled in the input default display gray, the use of some of the user's habits. Let the button exist on the page, suggesting that the user still has not completed the operation, here in fact, can add a little hint, clear where did not do well, I lazy did not do that kind of hint.

Terms of service below I marked it with a dotted line, and on the move up to show the hands of the icon, suggesting that users can click here, click on the terms of service pop-up a content layer, which is the protocol content, I did not do to open a new page that kind of reminder, I think this time the user's attention should focus on the current page, Instead of opening a new window, and then browsing the information there, distracting his attention, there is a new window to open a browser and a tag, quite occupy 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 to the server side, if there is no input to meet the requirements, there will be a small hand to navigate to the wrong input box next, and do the animation effect of moving back and forth. A moving error tip, I believe to be more attractive to the user's attention, and then make the appropriate changes. Here we have an attempt to use the new technology of CSS3 and have been trying to apply something that has been learned to the actual operation. The animation tip is still rough, but it gives me a new idea. The only thing that gets complicated is that the CSS code is a lot bigger.

This animation is in the control of the value of 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 {margin-left:10px} to {margin-left:2px}} @-moz-keyframes Prompt_hand {from {Margin-le ft:10px} to {margin-left:2px}} @-webkit-keyframes Prompt_hand {from {margin-left:10px} to {margin-left:2px}} @-o-key FramEs prompt_hand {margin-left:10px} to {margin-left:2px} @-ms-keyframes Prompt_hand {from {margin-left:10px} to

 {margin-left:2px}}

Nine, button tag

button inside the text I can be written as a normal "submit" words, also can work. But more meaningful button tags can help users build expectations of the results of the clicks, and let the user know exactly what I clicked on here with my finger.

Ten, do the prevention of repeated submission restrictions

Finally, after the user clicks Submit, I will have a rotating circle appears, can not only imply that the user system is being submitted, please be patient, but also prevent users to repeat the server. Typically experienced users will see this loop and realize that they are submitting, but for inexperienced users, they can do better. I just did a circle layer effect, in fact, here "register immediately" several words can be changed after the click of "Registration submitted in" and other prompts, so that users can more clearly know what is now.

To accomplish this, I used the plugin spin to be compatible with the various browsers. It is shown before Ajax is submitted 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 per line width:10,//The line thic Kness radius:15,//The radius of the inner circle corners:1,//Corner roundness (0..1) rotate:0,//the rotation o Ffset direction:1,//1:clockwise, -1:counterclockwise color: ' #000 ',//#rgb or #rrggbb or array of colors speed:1 ,//Rounds per second trail:81,//Afterglow percentage shadow:false,//Whether to render a shadow Hwaccel:false, Whether to use hardware acceleration className: ' Spinner ',//The CSS class to assign to the spinner zindex:2e9,// The Z-index (defaults to 2000000000) Top: ' 50% ',//top position relative to parent left: ' 50% '//left position relativ
 e to Parent};
 $ (' #ajax_spin '). Remove (); $ (' body '). Append (' <div id= "Ajax_spin" style= "Position:absoluTe;background: #FFF filter:alpha (opacity=30), opacity:0.3 "><div id=" Ajax_spin_inner "style=" position: relative;height:50px; "
 ></div></div> ');
 $ (' #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 preliminary ideas, after a new experience, will continue to make changes.

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

One of the goals I want to make is that when the user gets into the page, it's very easy to finish the various input boxes, and it's very comfortable and smooth to complete each box.

SOURCE Download Address: PHP User registration page Fill out the complete example of information

The above is the entire content of this article, I hope to help you learn.