Eight rules for a valid Web page form

If you are collecting information from your users, there is no simpler and more straightforward way to do it than a Web form.
A well-designed form can provide valuable information, instead, they may scare the user away.
With that in mind, each designer should know some rules for designing Web forms.

All instances in the article are generated using the CoffeeCup Web Form Builder.

1. Conservative set-up, with purposeful design forms

The reality we have to face is that no one likes to spend a lot of time filling out forms. Keep the form short and dapper
and eliminate any form elements that are absolutely unnecessary or that do not provide actual results. Ensure each part of the form
The division has played a role in promoting the whole, so that users will thank you.

Your form structure should be as functional as the elements within the form. When you design a form style,
Remember, at least in Western countries, people's reading habits are from top to bottom, from left to right. They also often
Use the TAB key to move between the elements of the form. Your design should be based on the rationality and standard of element placement.
The semantics of the signature to achieve. Of course, never let your form look scattered or disorganized--guarantee
All elements are evenly spaced and neatly arranged.

Here are some standard forms that you can use as a starting point to design more creative forms:

The label is left-aligned and the input fields are listed vertically:

This form is characterized by left-aligned labels, and the input boxes are arranged in neat order from top to bottom. Our eyes.
The eye can easily capture the form elements, especially if you are asking questions that are not familiar to the user.
Because they can easily read the list of issues from top to bottom without being interrupted by the input box, they will be more
Focus on the question you are asking. But this style will extend the time of filling out the form, because the line of sight is marked
It takes a lot of time to move between the checkout and the input boxes.

The label is right-aligned, and the input field is stacked vertically:

Right-aligned labels make it easier to distinguish and read, and remove tags and input boxes between those
Inappropriate space. However, it makes reading more difficult. It's not so appealing, and it looks untidy.

Label Top alignment:

Top-aligned labels can make filling forms faster and easier because the eyes don't need to be in the label and
Move back and forth between the input boxes. This style also allows you to put the relevant fields together, saving space.