Creating Killer Forms with CSS

So you’ve been to about a million websites at this point in your cyber life. There’s a little bit of everything in the online jungle, with every different imaginable style, color, and layout. Everyone is trying to be different, trying to separate themselves from the pack. So why is it that nearly every website, from the coolest of the cool to the worst of the worst, seem to still be using the same, ugly form fields that are default. Well, that’s about to change, at least on your website. I’m going to give you some quick and easy tips to spice up your form fields and set your website apart from the rest.

Robbins, Kyle. ReEncoded (2008). Articles>Web Design>CSS>Forms

Streamline Your Forms with Widgets

“Advanced forms” are rarely that. A more fitting name would be “Overwhelming and confusing forms”. But with Jason Long’s clever approach to streamlining a screen full of checkboxes, you might just be able to once again look fondly on your forms.

Long, Jason. Vitamin (2008). Articles>Web Design>Forms>CSS

Spruce Up Your Search Box with CSS and a Background Image

Very few designers appreciate the aesthetic of a text input field, and styling form fields cross-browser on any Web site can be a tedious and frustrating experience. The compromise typically involves applying a simple colored border and background to the fields. I think this is the right approach for Web sites and applications that are form field intensive, but the search box plays a special role in the design, and it deserves a little more attention.

Reindel, Brian. d'bug (2008). Articles>Web Design>Forms>CSS

Formal Weirdness

Explains some of the technical reasons for form controls being so hard to style consistently across platforms with CSS. Also asks a lot of good questions related to how various CSS properties should affect form controls if browsers would let them.

Meyer, Eric. MeyerWeb (2007). Articles>Web Design>Forms>CSS

Fancy Form Design Using CSS

Forms. Is there any other word that strikes as much fear into the hearts of grown web designers? There's also an improperly held belief that the only way you can guarantee that a form displays properly is by using tables. All of the code reproduced here for forms is standards-based, semantic markup, so you've got no excuse for relying on tables now!

Adams, Cameron. SitePoint (2008). Articles>Web Design>CSS>Forms

Accessible CSS Forms: Using CSS to Create a Two-Column Layout

Websites have become less accessible and more complex over time according to recent studies. Learn how to buck the trend by creating fast, accessible CSS forms that work with modern browsers and gracefully degrade.

Website Optimization (2008). Articles>Web Design>CSS>Forms