Many opine on HTML form layout best practices. Few back up those opinions. Thankfully, someone finally did with a great eye-tracking study for HTML form layout. Their goal was to figure out where people are focusing their attention. If users getting caught up on design element that not only attracts limited attention spans but actually distracts from the task at hand, a revision to your HTML form is in order.

Below is a summary of the findings in Top 10 format.

HTML Form Layout Best Practices

In general, stick to HTML form layout conventions. The HTML form layouts we saw 10 years ago are often familiar to most and have lasted this long for a reason -- they work.

If you want to introduce a stylish design element or feature, test it out first. For most websites, form input is where the conversion, and thus money, is -- whether it be a prospect lead or order submission. So a quick, cheap usability test could definitely benefit your decisions when it comes to HTML form layout.

Top 10 HTML Form Layout Best Practices

10: Layout -- vertical or horizontal layout?

When it comes to HTML form layout, Web users prefer to scroll than scanning across horizontally. Use a simple vertical layout.

9: Labels -- right-align or left-align labels?

Vertically aligning labels above the input field is best. If that isn't possible due to space limitations, use bold left-aligned labels. There is a significant design trend to right-align labels, so try A/B testing to see the impact of that design style on your specific implementation.

8: Columns -- single or multi column?

Single -- still simple and sexy after all these years.

7. Fields per line -- one or many?

If you need more than on field per line design them so they look like they are related -- coloring, proximity, or labeling.

Yahoo has an excellent, elegant example of grouping multiple fields on a single line

6. Section headers: simple or elaborate headers?

Emphasize the headers (coloured or shaded) if you want users to read them.

5. Required fields: how to handle required information?

Ideally, you wouldn't be asking for any information that isn't required. The more fields you have, the more likely someone will bail while completing the HTML form. But if you do have optional fields, make them clear rather than highlighting required fields with asterisks or red bolding. So that's something different -- assuming all fields are required unless otherwise indicated.

For example, place the word "optional" inside the input field.

4. Subtasks -- how to handle secondary tasks?

So you are checking out and as you enter in your first name, up pops an alert asking if you want to register/create an account. But my goal was simply to check out! Evil pop-up!

Let users first complete their task at hand by helping them avoid any and all distractions. And if you do need to distract them, be loud and proud by stopping them from progressing further without their required input. If you don't want to do that ask yourself if you really needed to distract them in the first place. Oh snap.

3. Real-time Feedback -- should you provide it?

The increased use of real-time server and code technologies like AJAX has introduced some new HTML form layout design elements. For example, rather than waiting until a user has pushed submit, some HTML forms verify inputted information in real-time.

The study didn't find a consensus on this new HTML form design element yet. Personally, we like it. Some users, however, don't like the interruption. So test real-time feedback before you use it.

2. Input tips -- where and when to place them?

Display input tips close to the relevant field and in a designated spot. For example, the input tip shouldn't be on the left side of a field and then right side for an different field -- keep the alignment consistent.

1. Long forms -- scroll or multi-step

Whether you use a long for or multi-step is wholly dependent on the amount of information you are trying to gather. So, test early and test often.

What does seem to be more universal is if you use a multi-step HTML form layout, provide feedback progress with a progress indicator. Tell them where they are, where they are going, and how much farther they have to go to get there. Don't make them ask "are we there yet".