suburban glory

A Blog in Suburban Glory:
Web Dev Ideas and Inspiration

How to style a HTML form with CSS and NO extra markup

|| Category: CSS ||

If you haven't read it yet then I strongly recommend that you take a look at Cameron Adams article Fancy Form Design Using CSS if you are really serious about tackling this aspect of web design.

It's an extremely well-informed piece that offers a myriad of tips including cross-browser compatibility details and usability and accessible markup advice.

However, one aspect of Cameron's article that I didn't like was the use of an ordered list. I really hate to add extra code unless it is absolutely necessary and, lets face it, styling a form by using a list is just a hack.

How to style a HTML form with CSS and no extra markup is amazingly simple really. This is what the code looks like:

input,
select{
display : block;
}
label {
float : left;
width : 200px;
}

And that's it. It produces a form like in the image below with no extra HTML coding such as an ordered lists or line breaks. It works across all browsers including Internet Explorer.

Dreamweaver Icon

The above code is just the foundation for form design and reading Cameron Adams article will give you lots more ideas about how to get it right.

Comments

You can add comments below.
Auto-paragraphing is enabled. Double newlines will be converted to paragraphs.

Allowed tags: a, abbr, acronym, b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, i, ins, kbd, li, ol, p, pre, s, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

If you wish add code examples then please do so between the following tags:

<pre><![CDATA[
Place code here
]]></pre>







mainland