Using CSS for Forms Instead of Tables

I pasted some HTML code to create a generic contact form like many others I have made before.  However, this time around I forgot to remove a surrounding <div> from around the form.  Of course, the form fields were not aligning properly.  After wasting several minutes trying to adjust the table that contained the lines of the form, I spotted the reason for the error in my default CSS file.  This got me thinking as to how I might move away from the use of tables for laying out contact forms … or, forms in general.

After Googling css and forms, I found a couple of articles that went in depth about how to create some really professional looking form pages:

I needed something simpler to get started.  Fortunately, I found a sample form where the author lays out a CSS styled form.

<legend>Form Heading</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" />
<br />
<label for="name">Email:</label>
<input type="text" name="email" id="email" />
<br />
<label for="name">Comments:</label>
<input type="text" name="comments" id="comments" size="40" />
<br />

Besides having to edit the CSS (see original link) to match a particular theme, using this method seems like the better choice for creating contact forms.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: