CSS and forms (1 Viewer)

[Bladez]

I'm not so well up on CSS and I know there are a few experienced web designers on here. Could someone help me out?

I want a form to display nicely in a browser. The markup of the form is quite simple and complies to HTML standards.

<form name="MyForm" method="POST" action="MyScript">
<label for="FirstName">First name:</label><input type="text" name="FirstName"/>
<label for="LastName">Last name:</label><input type="text" name="LastName"/>
<input type="submit" name="Submit" value="Submit"/>
</form>

I'd like to display the form in a two columned, borderless table with the labels in the left column and the fields in the right column, with the submit button also in the right column.

All the tutorials on the web involve altering the markup for the purposes of layout. I don't see why I should change the markup to include layout information. That's supposedly the whole point of CSS. Can anyone supply me with some CSS to get the desired layout?

Thanks!

 

[Wavioli]

you could style the form so that its a certain width with

form {width: 300px;}

and then either put a left margin on the inputs

input {margin-left: 150px;}

or else float the labels left, or the inputs right, or both:

label {float:left;}

input {float:right;}

floats can be a bit messy though.

forms are one of the most inconsistent things to style (between browsers that is) they all have their own unique way of looking at it, so a bit of fiddling will be necessary.

Good luck!

 

[Bladez]

Cool. Thanks dude. I'll give that a go now.