How To Create Perfect Form Markup And Style It With CSS

Once you have the perfect markup, it is time to style with CSS.

Type Is Not Enough; Set Class Too

Styling input elements can often be a hassle — they’re all very different (text, checkbox, radio, file, submit, reset) and yet there’s only one tag for them. Sure, you could use attribute selectors, but unfortunately IE doesn’t understand those. This is where classes come to the rescue. Simply set the input’s class to the same value as the type, and then use it to target that input. Sure, it’s silly, but it works.

Group Elements Together Logically

This is one of those tips that pays off more and more over time. Everyone probably uses fieldset to group multiple form elements, but I know that not that many people are in the habit of grouping their labels with the matching form element.

When grouping elements with their respective labels, it pays to be consistent. That’s why every label and matching form element are nested in a div with a class “field” (you could also use a p element instead of div). There are several advantages to this grouping:

  • In a way, I’m specifying that these two elements belong together.
  • I can easily see which label belongs to which element.
  • Ease of use.
  • I have one more element to use when styling the form.
  • I can set further classes on this div, such as “required”, to signify that this field is required.

I would say that of all those reasons, my favorite is the last. It gives me the ability to apply extra styling to both a label of a required form element and to the element itself.

Earlier, I mentioned that everyone already uses fieldset elements for grouping related fields. What I don’t see that often is nesting of fieldset elements within each other. Why would you do that? To semantically group related radio or checkbox inputs, and to be able to give that group a title, or rather a legend. While we’re at it, make sure that you put each label and input in its own list item within an unordered or ordered list. After all, it is a list of checkboxes / radio buttons that you’re working with.

Finally, I think that grouping all buttons in a form makes perfect sense. I usually do it with a div that has a class “buttons”, so that I can easily select it in my CSS and do many other great things with it.

Are Legends Worth It?

To be honest, it depends. If you’re not in need of too much styling and can stomach the little hacks required to get legend working properly, then go with it. If not, just use an appropriate heading element instead. For the sake of completeness, I’ll be using the legend element in this post.

Styling Forms In A Cross-Browser Compatible Way

Now that we have a great form to work with and we know what’s happening with all the mark up, let’s discuss how we can achieve basic cross-browser compatible styles. The browsers I’ll be testing on include: IE6, IE7, Firefox 3, Safari 3, Opera 9.6, and Camino 1.6. This set-up should cover all the bugs that we could possibly encounter.

I’ll approach this part in the same way as the previous one, showing the full CSS first and then explaining the various declarations. In general, I would recommend that you use Eric Meyer’s reset; however, since I want this tutorial to be completely standalone, I’ll be providing some basic styles and resets along with it.

There are two common styles of CSS forms. The “vertical” layout has labels above input fields, while the “horizontal” layout has labels to the left of the input fields. Once you know how to build the basic vertical layout, it’s very easy to switch to the horizontal one. I’ll make sure to explain both.

Leave a Reply

Your email address will not be published. Required fields are marked *