View Full Version : How can I make a good-looking form?

07-21-2008, 02:51 AM
Hi, today a friend of mine introduced me to browsershots.org. When I saw what my contact forms looked like in different browsers I couldn't believe it.

To make forms look nice I usually create a div and assign it a background image using the background-image css property. I give the div the same height and width as the background image, and then I position the input fields using the margin-top and margin-left properties.

In Safari the text fields are way too long and get out of the image. In IE the vertical separation is too little and everything is screwed up. In Opera the text fields are too tall and screws up the form as well.

Many people recommended to me not to use divs with a background for forms. My question then is: how should I do it? Can I use a table with a background image? I don't want to have a normal (ugly) contact form. Is there any way of making a form work across the browsers without giving up the nice design?

BTW, my website is www.tryarg.com/WorldCup if you want to take a look at the form at the bottom to see what I am talking about.

07-21-2008, 09:20 AM
There may be some difference in the appearance of various input control over browsers, though we can layout the form very well.

I haven't viewed your site, as I see a lot of markup errors in your document, see http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tryarg.com%2FWorldCup&charset=%28detect+automatically%29&doctype=Inline&group=0

Fix them first.

07-21-2008, 09:26 AM
Take a look into Niceforms: http://www.badboy.ro/articles/2005-07-23/niceforms_preview/

07-21-2008, 10:29 AM
Even if you didn't use a background image, the input sizes would be different across browsers. So the background image is a moot issue, and if you're marking up your form "properly" (i.e., using fieldset, label, and input together) then accessibility isn't an issue, so might as well make it pretty.

To get things looking right, start by sizing everything in the form width, height, line-height, font-size, etc. as consistently as you can. At the moment I don't see any dimension (width or height) assigned to your input fields, which of course is going to make things look differently everywhere as each browser will apply its own default size.

07-21-2008, 01:17 PM
Pretty accessible forms (http://alistapart.com/articles/prettyaccessibleforms), anyone?

07-21-2008, 04:17 PM
i was about to paste that link :D