Displaying the Label Element

When structuring forms for a website, I generally set about doing the layout in one of two ways. I either set out the form structure so that it resembles how I used to do it using tables—with the label to the left and form element to the right, all nice and neat in a straight line—or else if the form is large, I opt to structure it in two columns and use the display: block; label element to force the form element to wrap below it, not unlike what you did in Part 1.

By default, the label and form elements are inline elements. This means that in their natural state they will simply string out across the browser window in a straight line (see Figure 1) and then wrap to a second line, depending on the browser's view-port width. This is likely not what you would hope to see when you complete a form. It looks a little untidy, to say the least! It is apparent from Figure 1 that you need to make alterations to the form's default display.

Figure 1. Form elements stringing out across the browser window in a straight line

I added a background-color value to the label element and removed the display: block; from the label's CSS rule in Figure 1 to show how the inline and block-level rendering of the label element changes the layout of the form's structure. Figure 1 shows the label element as an inline element and the red background color shows the area that is occupied by the label element—just the width and height of the label's text.

By contrast, Figure 2 shows the label element with its display value set to block—quite a difference, as you can see! When the label element—or any other element for that matter—is set to display: block;, it takes up the width of its containing element. In this case, it's the body element so it takes up the full width of the browser window and forces the form element to wrap onto the next line. You may have used the <br /> tag to accomplish this in the past, but the display: block; method is a far nicer solution and removes unnecessary code.

Figure 2. Setting the label as a block-level element

I'll bet that most website designers are used to laying out forms in tables. Tables provided an easy way to align form elements with their labels. Like me, I'm sure you placed the label in the left column of a table and the form element in the right column. It must be said that this is a logical appearance for laying out a form and you are going to reproduce this type of display using CSS to position the elements.

So far you have learned that you need to set the label element to display: block; in order to prevent your form from stringing out across your page. As you can see in Figure 2, this works fine. The next step would seem to be obvious: move the label down and to the left of each form element. This is a little tricky, however, because the label is now a block-level element and, by default, wants to occupy its own line in the browser.

Page 2 of 4

Previous Page

Next Page