Shulou(Shulou.com)06/03 Report--

This article mainly introduces php how to fill in the information on the user registration page, which is very detailed and has a certain reference value. Friends who are interested must read it!

The registration page is a necessary page for most websites, so it is necessary to design your own registration page carefully. The following three pictures, the first is the registration display page, the second mind map is a simple logic, and the third is to view the invoked JS file through firebug.

First, write a description for each input box

When users see this input box, they can clearly understand what the input box is for, minimizing the possibility of confusion. We need to assume that users don't know what to enter for registration, and then give them enough information to help them understand.

2. Small icon icon

Icon is a tool for enhancing content and gives visitors a good hint. In the past, the use of small icons is with pictures, with pictures, many times those alignment, width and height make it very troublesome, this time I make the icon into a font, it is much easier to manipulate the font than to manipulate the picture. You can go to a foreign website icomoon to make icon fonts, but this website is slow to open and needs to wait patiently. Make work easier and easier by using online resources and accepting new ideas and technologies.

These small icons are exported from the icomoon website. Alignment is very convenient in this way, but IE6 and IE7 do not support selector before (see here for browser compatibility of selectors), so this icon will not be displayed in these two browsers.

Register a 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"}

Third, the number of characters that can be entered in the input box

In the past, I would set an attribute limit for the maximum number of words in the input box, which was a rough way, because after entering a certain character, I suddenly couldn't enter it, and it felt like the keyboard suddenly failed without any sign.

Now through this setting, first of all, we can let the user know that there is a word limit, and then let the user know clearly when this limit will be reached, which is a good way to improve the friendliness. Another small operation has been done here, that is, after entering some characters, it will turn red, warning the user that the number of words will soon exceed the rated number.

This is a concept of poka-yoke, which means to prevent errors, and has two meanings: detection mechanism and prevention mechanism.

Adding a simple character counter can turn a potential error into another moment when it only takes common sense to use this product.

Function _ textLimit (options, value) {var length = value.length; var color = options.normal; var remind = options.len-length; if (remind > 0 & & remind

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.