Aligning Form Elements

One of the most common problems with form elements is trying to get them to line up, stay put, and tab in the correct order.  It’s actually very simple to make them behave, but not necessarily obvious. Below are a series of form elements placed freely on the page with individual text elements next to them as labels:

Now I just eyeballed the placement of these checkboxes. As you can see, they don’t quite line up the way I  want them to. Here is the same array of form elements lined up correctly

How did I do it? Simple!  All I did was put the elements in a table like so:

One   Six   Two   Seven   Three   Eight   Four   Nine   Five   Ten

I made sure to turn off all the borders, padding and spacing to make it look as though all the elements were freely placed on the page.  This is one of the simplest methods to get an array of form elements to line up correctly.

You can also place form elements in text boxes, and you can make sure to line up elements which do not easily go into tables using the Align options when you have multiple elements selected.  Always make sure that you have elements which are supposed to be aligned horizontally aligned at the Top.  This forces all the elements to be in the same HTML row and therefore tab horizontally in order.

Remember that because form elements can change size with font settings and browsers, always make your text box or table cell containers large enough to accommodate the change in the element size.

Go Back to Previous Page

Have a question that you can´t find the answer to? Want to report a possible bug?

Send a help request to NetObjects Technical Support