Need a tableless form using CSS? Here's your solution!

Hi,

I know that a lot of people have issue with this so here is an elegant solution to your problem.

Here is the HTML for your form, you probably want to put it in a div of its own

<form name="frmcontact" id="frmcontact" method="post" action="contactaction.php">

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

<label for="email">Email:</label>
<input name="email" type="text" id="email" /><br />

<label for="phone">Phone:</label>
<input name="phone" type="text" id="phone" /><br />

<label for="destination">Destination:</label>
<input name="destination" type="text" id="destination" /><br />

<label for="movingdate">Moving:</label>
<input name="movingdate" type="text" id="movingdate" /><br />

<label for="question">Question:</label>
<textarea name="question" cols="40" rows="5" id="question"></textarea><br />

<input type="submit" name="Submit" value="Submit" />
<input name="textfield6" type="text" class="hidden" size="1" />

		</form>

HTML:

And here is you CSS to style it. This can be put in an external file and attached or be put in your header. I recommend putting it in an external file.

#frmcontact label,input {
display: block;
width: 150px;
float: left;
margin-bottom: 10px;

}

#frmcontact label {
	text-align: right;
	width: 75px;
	padding-right: 20px;
}

#frmcontact br {
	clear: left;
}

Code (markup):

Well done you!

I can provide an explanation of what each part of the code does, if requested.

Thanks
Notting

 

<input name="textfield6" type="text" class="hidden" size="1" />

Code (markup):

Whats this for? Hidden input or was it just a mistake?

 

Dunno about html, but by looking, i think that The text field is a password field, and it will show and **** characters rather than a letters..

 

I've dealt with table-less forms for a while, and by experience I know if you don't use some sort of wrappers around pairs of labels and their corresponding form controls, you're going to run into a bunch of shit if the form gets bigger/complex. It may seem like unnecessary extraneous markup at first, and I don't blame anyone for excluding wrappers around (when I first started tableless forms my markup was almost exactly similar to that above). I'd suggesting wrapping a <div> around the label/inputs and if it gets complex enough where some of your fields will have a different look, apply a class on the wrapper div (that wraps around EACH label and select/textarea/input) and give it different rules.

Oh and by the way, you don't need to define display:block on a floated element, and if anyone is going to add horizontal margins they're going to run into double margins in IE ( display:inline; ) and I'd suggest putting the clear:left on the label instead. You don't even have to float the inputs. Anyone who's using XHTML Strict and wants their code all pretty and validated will get an error because the name attribute should not be used on the form element itself (only the form controls).

I'm also a little anal about names, but "frmcontact" sounds like some 90s coder would give his form. Why not something like "contact-form" ?

 

Well spotted:

This is part of an effective spam trap which i use. I have detailed it here: http://forums.digitalpoint.com/showthread.php?t=577413&highlight=notting

Thanks for your comments soulscratch, good points well made.

Cheers
Notting