demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Form Layout With CSS

css / forms

Estimated reading time: 4 minutes

In I’ve discussed the correct markup and best practices to make a well-structured, semantic, form. The appearance of the form has been a secondary consideration while I emphasized how important it was to not add extra markup. Forms are not paragraphs, and they do not need <br> tags or to display correctly. That is, not surprisingly, the role of .

Step One: Clarify Accesskey Shortcuts

Part of the process of designing a good form is using markup to make it accessible by users of differing abilities. Each label in our form should have a unique accesskey value. While correctly configured browsers will make these accesskey options obvious to users that need them, we want to make sure that everyone who desires to use them is very clear on which shortcuts are present. If you’ve consistently used the first letter from the text of the label for an accesskey, (which is recommended) the CSS to achieve this is very simple:

label:first-letter { font-weight: bolder; color: red; }

(Of course, you can customize the appearance of the first letters in any way you wish).

Sometimes using the first letter of every label is impossible, simply because it has been used elsewhere in the form, or because that key press combination is reserved by the system. In that case, you must use other characters in the label text.

A good example of this would be two separate fields in a form, one asking for a phone number and the other for a postal code. We cannot use “p” as an access key value for both fields. This means adding a little markup to our . To this:

<label for="postalcode" accesskey="c">Postal Code</label>
<input type="text" name="postalcode" id="postalcode" pattern="[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]">
<label for="phonenumber" accesskey="n">Phone Number</label>
<input type="tel" name="phonenumber" id="phonenumber" pattern="\d{3}[\-]\d{3}[\-]\d{4}" />

We add the following inside the <label> for each element:

<label for="postalcode" accesskey="c">Postal
<span class="shortcutkey">C</span>ode</label>
 
<label for="phonenumber" accesskey="n">Phone <span class="shortcutkey">N</span>umber</label>

And change the CSS to:

label span.shortcutkey { font-weight: bolder; color: red; }
Elegant form (charlotteswebdesign.ca)
An elegantly designed form by Megan Ray

Step Two: Make The Form Presentable

There are many possibilities for cleaning up the appearance of our form via CSS. Let’s start with the simplest:

Option 1: Label and input on separate lines

This set of declarations forces each label on its own line, keeping the submit button by itself through the use of an attribute selector:

label, input[type="submit"] { display: block; }
label { display: block; }

Option 2: Label and input on same line, evenly spaced

Many designs call for label elements to be beside their associated form fields, to save on space. In that case, there are two possibilities. The first is an extension of the technique we just used:

label { display: block; width: 10em; clear: left; }
label, input { float: left; }

The CSS reads as follows: when the browser encounters a new <label> tag, display it as a block element (so we can give it a width), and make sure that everything is cleared to its left (i.e. nothing comes before it on the line, or influences where the line falls). That will force each element onto a new line when it appears, floating to the left of the following element.

The only problem you may encounter with this technique would be putting two input tags next to each other, such as a divided postal code, or an area code and phone number. In that case, you could overrule the embedded or linked style with an inline style on the affected element.

Option 3: Label and input on same line, label evenly spaced

Another possibility for lining up our labels comes from using variants of display: table, the basics of which we covered in a previous section. Essentially, we want our labels to act as if they are in a single column of a table, which should make the width provided to them exactly the same. To the HTML we have used above, we apply the following CSS:

label, input { display: table-cell; }

The problem is that the browser does not know when to place label-input pairs on a new line. We’ll do so by adding a div around each pair, and adding appropriate CSS:

<div>
<label for="postalcode" accesskey="c">Postal Code</label>
<input type="text" name="postalcode" id="postalcode" pattern="[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]">
</div>
<div>
<label for="phonenumber" accesskey="n">Phone Number</label>
<input type="tel" name="phonenumber" id="phonenumber" pattern="\d{3}[\-]\d{3}[\-]\d{4}" />
</div>

As they are block elements, each <div> will automatically divide the label-input pairs onto separate lines. The div elements are only used in the context of a form with valid markup, so we can use a descendant selector in our declaration:

form div { display: table-row; }

Now, in addition to placing the label-input pairs on separate lines, each div also acts like a table row, meaning that each column of implied “cells” takes up the same width.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.