Aligning Labels

There are a number of different ways that you can arrange your form. Where you put the labels for each form field relative to the field the label refers to is one such choice that you need to make.

Where the form needs to fit a relatively small width the best place to put the labels is immediately above the form field that the label refers to. This makes it easy to read down the form and to know what is expected to be entered into each field. Where more width is available placing the labels adjacent to the field they refer to rather than above it is a practical alternative.

Which of these alternatives is actually applied to our form depends entirely on how we style the labels. Setting the label as display:block ensures that the label appears above the form field it refers to provided that all our form fields are also styled with display:block. If instead we float:left the label and give it a width then the label will appear to the left of the form field it applies to. Using text-align:right will allow the text in the label to appear right next to the form field.

By using a media query to test the minimum viewport width we can even combine these together so that the position of the labels is determined by the available width.

label {display:block;}
input, textarea, select {display:block;width:20em;}
@media (min-width: 35em) {
label {width:10em;text-align:right;float:left;}

Here is how the labels and fields look when styled this way (change your browser viewport width or view on different devices to see the effect):


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow