How would you code this form?

HTML & CSS
1

Hello,

I’ll be the first to admit I’m a little rusty lately. I’m still hacking away at the tables to CSS redisign I’m doing. Now I’m coding the form. So im curriuos how would you code this? http://www.visibilityinherit.com/projects/image.jpg

The way I did it was it’s all wrapped in a form. Each section is wrapped in a div (each with a numbered id) which is floated left, clear both, and a little margin. That way I didn’t have to worry about widths. Inside each div I just have label/input. They are both floated left as well and given a width with clear left on the label. The blue text in the form is just p’s floated left. Any needed style change in the different sections is targeted by #form div#id label {yada}. Would you do it dif? How so?

2

Seems just fine as you describe it mate!

3

Hi Eric,

I used to float them but now I find it easier to use display:inline-block instead. If you float it would mean you have to have a clearing mechanism for each pair of controls as IE7 and under won’t clear properly and although you clear the label the control may still snag or rise up.

It’s much easier to make the label display:inline-block width a width and then each pair will always create even rows and you can use vertical-align to tweak the alignment also which is a bonus.

I usually add a break at the end of the line for accessibility when css is of and is one of the few places that a break is the correct element to use.


<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />
<br />

etc.....
4

Thanks Paul! I’ll give that a try and see how it turns out. I floated all the key pieces of my sites layout too. A couple weeks ago, for ***** and giggles, I tried display: inline-block for the layout instead. It worked well of course. Already don’t remember why, but floating seemed easier, so I just stuck with it. But I see the pluses of what your saying for form elements so I’ll def give it a go.

5

…and thank you too zbing!

6

forgive my ignorance. I never use inline-block. So inline elements, like label and inputs, dont need the display inline hack for IE6/7 right because they are naturally inline correct? only natural block.

7

Yes that’s the beauty you don’t need any hacks for natural inline elements. Just set them as display:inline-block

8

Cool. Because so far I haven’t had to use any browser specific code and I’m aiming to keep it that way. Thanks!

9

inline block worked out quite nicely. I was able to trim it quite abit from the floated version. Thank you Paul.

10

Glad it worked Eric.:slight_smile:

As I said above I always used to use floats but changed to inline-block and it makes things a lot easier and more robust. There are times when you have to use floats though especially if you want the input right aligned in a fluid width