Web page design tips for coding design

Original address: http://www.noupe.com/design/tips-for-coding-and-designing-usable-web-forms.html

Note: About label and tag, in the Chinese are translated into the label, and the following appear in the label, are the label translation, such as "User name" + input box, where the "user name" item in English is a label, agreed to translate as a label

A page form is already the most discussed element in Web design, it's been more than 10 years. Call-to-action (generally translated as "Call of Action", "Call of action", but all feel not ideal.) the way in which the user is usually directed to the form page, the payment needs to use the form; A user registration or subscription requires a form-use of the form will not stop.

Although in HTML, it's fairly easy to put a form together, but for usable, friendly forms, coding, styling, and design are difficult. In the transformation of the site, because the success of the conversion rate of the form site plays a very important role, the following tips and articles at the end of the source code provided, Valuable information should be provided to developers who make and encode page forms.

Two columns VS one column

This depends on the contents of the form, but when the form content is fairly simple, it is usually possible to avoid two columns of layout.

Here's an example of a nice simple form that places each label (label) above the related form element

What are the benefits of this form layout, just to oppose the two-column layout? First of all, the elements of the form have more space to meet future changes to the copy. A two-column layout has a limit on this point, and may even need to refactor the entire form to meet the needs of the adjustment. Another benefit is that it doesn't look messy, There won't be a lot of whitespace in each tab, so it's easy to read and it's easy to relate the labels to the input boxes. In addition, the background color of each pair of tags/input boxes makes the form visually appealing.

As a contrast, let's look at the following two-column layout form

Especially because of the left-aligned text and the inconspicuous color, this form does not have the clean visual effect of the previous example. In fact, the vertical gap between the label and the input box is a distraction, there are many parts, and in fact a simple form should visually act like a whole.

But using a two-column layout to accomplish a clear, methodical effect is not impossible, as the example shown below chapters Indigo Books

clear and organized two-column layout form

Therefore, although the layout of the form is not clearly defined, there are still valid principles: include simple forms to avoid using two-column layouts; If you use two-column layouts, you should align the labels to the right.

Let the feedback of the inspection be displayed on one line

Luke Wroblewski recently wrote an article in a list apart about the feedback of the form's submission and put it in one line. The direct reference to the original text is as follows

When the inspection information is displayed on a line, our testers are faster, have higher success rates, make fewer mistakes, and are more satisfied with

jquery Inline form Validation, because Validation is a Mess this step-by-step tutorial describes how to use jquery to display feedback information on a single line in more information forms.

Another article: Really easyField Validation

Dexagogo provides a simple script that displays your form's presentation information on one line. The examples in the demo are not the best, but you can certainly follow what you need to customize. The effect of the fade-through in the script is implemented using scriptaculous .

Organize input boxes for the associated

In a long form, in order to increase usability, you may have some limitations, but by organizing the associated input boxes together, the form is segmented and displayed with a controllable visual component, making the form less scary. This way, the form can make it easier to fill in, Even if you fill it out, it may take the same amount of time to fill out an organization's form.

To organize the associated forms, use <fieldset> and optional <legend> elements, just like the following code

<form id= "form" action= "register.php" method= "POST" > <fieldset> <legend>basic info</legend> <div> <label for= "name" >Name:</label> <input type= "text" name= "name" id= "name"/> </div> <label for= "password" >Password:</label> <input type= "text" name= "password" id= "password"/> <div > <label for= "password-confirm" >confirm password:</label> <input "text" type= " Password-confirm "id=" password-confirm "/> </div> </fieldset> <fieldset> <legend>address </legend> <label for= ' address ' >Address:</label> <input type= ' text ' name= ' address ' id= ' address ' > <label for= "address2" >address (cont "D":</label> <input "text" type= "name=" Address2 "id="/ > <label for= "Zip" >Zip/Postal:</label> <input type= "text" name= "Zip" id= "zip"/> <label for= " City ">City:</label> <input type=" text "name=" City "id=" City "/> &Lt;label for= "Country" >Country:</label> <input type= "text" name= "Country" id= "Country"/> </ Fieldset></form>

<fieldset> The default will be a border, but can be modified, usually using CSS to remove. Here is an example of a separate form that uses <fieldset> and <legend> to divide into two parts

Cosmicsoda Registration Form

Unfortunately,,<fieldset> 's borders do not behave the same in different browsers, so the best way to do this is to get rid of CSS and create custom borders in other ways. This also affects the <legend> effect, so it's rare to see the use of < Fieldset> and <legend> and two HTML elements. But <fieldset> can still be used to organize elements, while customizing the borders and headings to achieve the underlying effects .<fieldset> and < The legend> element has additional help with the ease of use of the form.

Clear identification of required items

A form typically uses an asterisk (*) that is not the same color as other text to indicate a required entry, so the required fields are highlighted. Although most websites now contain (required) identifiers, some of them are not reasonably used.

The explanation for the asterisk is that the text should be placed directly above the form, so the user can see it before they start filling it out. Some sites place an asterisk's explanatory text below the form, which looks a bit like a footnote. The following elderluxe Contact page example, Asterisks explain the placement of text in a bad place.

There are two problems with the above example: the color of the asterisk is the same as other text; the interpretation text is placed at the bottom of the form. In most cases, an asterisk alone is sufficient, without explanation, but if your target audience is not a computer user (computer-savvy), You really need to add an explanation for the asterisk above the form.

The following example from the Office Depot ' s registration page shows a reasonable placement of the asterisk's explanatory text

Although the above example also has some problems (such as the left-aligned label text, the font is too small, white is too small to use, but it is clearly marked with a required entry and the meaning of the asterisk is explained by the user filling out the form. This is the most important of the example, the first three items are not required, so the user can safely skip them.

More beautiful check boxes, radio boxes, buttons and Pull-down menus

A form can look boring, especially if the Drop-down menu, the checkbox, the style of the check box is limited by most browsers, and you can't use CSS to customize those element styles individually, so that each browser shows the same effect. Fortunately, There are many JavaScript Plug-ins and code that allow developers to use Cross-browser, more elaborate form elements.

The jQuery checkbox enables you to include custom check boxes and radio boxes in your form. I don't really care about the look of the radio buttons (they don't look like a radio box at all), but it's really an optional option.

The jQuery image Combobox is a full support custom picture (skinnable) Pull-down menu that replaces the browser's common-ugly pull-down menu

giva Labs mcdropdown jQuery Plug-in is an intuitive, keyboard-enabled, easier alternative to traditional pull-down menus while allowing data nesting.

Show prompt when input box has focus

Complex forms typically have many different input boxes, and if you display some help text, you can make it easier to fill them out. Of course, you don't want users to be obliterated by one or more explanatory form text.

By simply changing, you can write a JavaScript script (or use a customizable plugin), display a message in a style similar to a traditional hint, explain a form element that might be confusing, or a special form of input box that requires input (for example, only letters and numbers are allowed, and a user name of at least 6 characters)

jQuery input floating Hint box is a simple plug-in that displays a fully customizable surfacing window when the input box has the focus.

The DHTML goodies form Field Tooltip is another tool for inspection of input in forms. It displays a help text based on the title property in the form's input box.

Full of white leaves

As mentioned earlier, if the elements of a form are not displayed in a clear, friendly way, it will look ugly and confusing. Usually we think that the principle of using the white in the design of the website also applies to the form, even to the smallest detail.

You can improve the design of your form in the following ways: Add the appropriate white around the input box, give the element a larger or better size, or you can adjust the Padding property in the CSS to make the input box white. For example, try typing some text in the two input boxes below.

Just by adjusting the padding and size, the second input box has a better sense of use. When more than one text entry box appears in the same form, it makes a big difference in overall sense, even though technically it doesn't make a big difference in the length of time the user fills out the form.

Also, this allows you to see more characters in the input box. In particular, the name input box, should be for those longer name to provide a greater visibility space. Beyond the characters that will start to squeeze other characters out of sight, so it is best to have enough space to meet those longer names of users, Make it easier for them to recognize the error. The following input box lets you see how long names are truncated.

Make your form more friendly

This topic for easy to understand forms can easily form an entire article or more, but there are a few tips to make sure your form is friendlier and available to different users.

• Use the Title property in the input box to help users who use screen readers
• If the label does not surround the associated input box, use the For property to match the ID of the associated input box. (This allows the focus to be placed into the input box when the user clicks on the label.)
• form a tab queue by using the TabIndex property for each element (so that the keyboard uses the TAB key to switch sequentially, the translator notes)
• For the tab queue, use a larger "step size" to increase the number (such as using the 10,20,30 ...). Instead of "1,2,3 ..." so that you don't need to rewrite all the TabIndex properties in the future when you need to add
• For check boxes and radio boxes, the label is placed behind the associated element so that the screen reader accesses it, the label is read first, then the check box or the Radio box
• Use <optgroup> to organize <select>
• Use the AccessKey property to support keyboard shortcuts

Extended Reading

• Creating Accessible Forms
• beautiful Forms–design, Style, & make it work with PHP & Ajax
• HTML Forms and Input on W3Schools
• Web Form Optimization Tips
• Accessible Forms
• Web Form design:modern Solutions and Creative Ideas