Usability design of Web page form in web-based design

Original: Tips for coding and designing Usable Web Forms
Tips on usability form coding and design

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 website, the form always plays a very important role in the conversion of the site, the following tips and the source code provided at the end of the article, 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 cluttered , and there's not a lot of white space in each tab, so it's easy to read and it's easy to relate the labels to the input box. 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 can be distracting, mistaking it for a lot of parts, and actually a simple form should visually act like a whole .