Fancy Form Design Using CSS

Notice: This is a discussion thread for comments about the SitePoint article, Fancy Form Design Using CSS.

Thanks Adams, Gr8 article. :slight_smile:

would like to point out how made their forms. I’m quite impressed with their css use… check out:

Wow, this was an excellent article, just what I needed for my new form :wink:

[ot]Ok hate is a strong word, improper use of JS (along with people who do 1 turn on a solved cube, then undo the move and say “ZOMG ITS SOLVED” also piss me off) are on my hate list :slight_smile:


Hm, I’ll reserve the word “hate” for abused Javascript… XHTML, bleh, I write in both just because it’s inherited legacy I work with. No biggie, simply because it ISN’T real : )

I don’t care either way, but will still always add a legend to a fieldset.

I hate XHTML with a passion Stomme, people misuse it and use fake XHTML and most of the time, those people are very very ignorant and confused :slight_smile:

It causes me headaches to try and reason with them :wink:

I expect they wrote for XHTML (I don’t remember any more but SitePoint seems to really like XHTML for some reason) where fieldsets strangely are not forced to have a legend.

Me, I always add a legend if I have a fieldset, and I do not make a separate fieldset for the submit. It’s not some unrelated question, its a form submission input.

You have no legend on your submit fieldset which invalidates the markup. Is it better to not put the submit buttons in a fieldset or put a legend on the submit fieldset?

I’ve actually found that if you wrap your fieldset in an additional div and apply the styling that you would normally apply to the fieldset to the div, in conjunction with using the additional span inside the legend, that you can achieve similar cross browser styling without the need to use IE-specific styles.
I discuss it here:


As far as I can see they use a table inside their forms?

Yup. And the ironic thing is I stumbled upon the same technique John (Tyssen) illustrated in his article around the same time he did. :slight_smile:

If you absolute position your error messages, you will have problems with localization as the messages will be longer or shorter in other languages. That is the main problem with these kind of “css wizardry” that they are not too flexible.

The asterisk image idea is solid. I like that.

This should take make my move from tables based forms easier, although I’m surprised at the amount of markup required.

Giving inputs/elements the same name and id brings problems in IE when using getElementById() or the common $() because name and id share the same namespace in XHTML. Very bad style to suggest that naming in an article. One solution is to use a suffix like “fe-name” (form-element) for the id.

Interesting article. Good to see someone advocating table-less forms!

I did not see mention of an alternate use of the label tag – it can also wrap the input element it is ‘for’, and is then implicitly linked to that field. The for and id attributes are no longer necessary on the label and input elements, conserving bandwidth, and making a more obvious link between the two elements.

I am not aware of the impact this use has on screenreaders, however. Anyone?

Very interesting article.
This tutorial should be added to the following list:
80 CSS Web Design Resources: The Killer List

The thing is, it doesn’t need that much markup.

IE doesn’t support implicit association. You can wrap the input inside the label, but you still need to include the for/id association.

I generally use this pattern, it’s always served me well:

<label for="whatever">
    <input type="text" name="whatever" id="whatever" />

Wouldn’t an unordered list make more sense in the form? Why does it need to be ordered?

Why bother using it at all? I see no use for it whatsoever.