How to align form text fields?

Hi,

I have a basic question on how to align text fields in a form, my text fields on my form are slightly out of alignment. I’m a beginner when it comes to forms, so I’m not sure if there is something in HTML I can do, or possibly CSS. Any ideas??

You can see my form and my problem at:

http://jakeelectricinc.com/Estimates2.htm

:lol:

Depending on you skill level with CSS you can create you form with either Tables or not!

Here is a tutorial for a tableless form.

Additionally I would NOT recommend the mailto:email@emailaddress method for your form. How proficient are you with PHP and HTML? Do you know enough to edit any minor code?

Hi,

Thanks I’ll take a look at that tutorial. I’m somewhat knowledgeable with CSS, but haven’t gotten into designing solely with it yet. So I’ll take a look.

Shoot thanks for telling me about that function line, I meant to take that out of there, I just put it in as an experiment. I’m pretty efficient in HTML, I’ve always coded by hand, however I know very little about PHP. Started to learn it, but then just didn’t have enough time to really concentrate on it.

I’m using a godaddy .asp form script for my form, it works pretty good, except for the fact it likes to sort everything alphabettically. I’ve asked over on the ASP forum several times about how I can fix this, but nobody seems to know.

Thanks
Jodi :0)

One question that just struck me, are you sure that a CSS setup will work in Foxfire. I’ve noticed that FoxFire doesn’t seem to like much CSS code, it will take a little but put too much and things seem to go wrong. Although it could just be my coding.

For awhile I was getting way too used to absolute: positioning everything, I thought it was an easy fix, until I learned that it was nightmare to try and maintain and some browsers didn’t like it.

I’ve done a very rough Tabled form for you. Use it as a starting point to improve upon. If you want to dabble with a JUST css form, rock on!

I would strongly recommend you read this article on Sitepoint though.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <style type="text/css">
 .tbl_bg {
 	background-color:#D7D7D7;
 	border:1px solid #898989;
 }
 .alt {
 	background-color:#EBEBEB;
 	}
 	.altalt {
 	background-color:#EBEBEB;
 	border-bottom:1px solid #898989;
 	}
 	
 .tbl_bg p {
 	font-size:0.8em;
 	text-align:left;
 	margin:0;
 	padding:5px;
 	font-family:Arial, Helvetica, sans-serif;
 	}
 .lft_bdr {
 		border-left:1px solid #898989;
 		}
 .input {
 	width:300px;
 	border:1px solid #ACACAC;
 	margin:0;
 	padding:2px;
 	}
 	textarea {
 		width:300px;
 		height:100px;
 		border:1px solid #ACACAC;
 		}
 
 </style>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Untitled Document</title>
 </head>
 
 <body>
 <form action="" method="get"><table width="500" border="0" cellspacing="0" cellpadding="0" class="tbl_bg">
 <tr>
 	<td colspan="2" valign="top" class="altalt"><p>
 	  <input name="radiobutton" type="radio" value="radiobutton">
 	  Commercial &nbsp; 
 	  <input name="radiobutton" type="radio" value="radiobutton">
 	  Residential &nbsp; 
 	  <input name="radiobutton" type="radio" value="radiobutton">
 	  Industrial</p>
 	  </td>
   </tr>
   <tr>
 	<td width="150" valign="top"><p>Name</p></td>
 	<td width="350" valign="top" class="lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top" class="alt"><p>Address</p></td>
 	<td valign="top" class="alt lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top"><p>City</p></td>
 	<td valign="top" class="lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top" class="alt"><p>State</p></td>
 	<td valign="top" class="alt lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top"><p>Zip Code</p></td>
 	<td valign="top" class="lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top" class="alt"><p>Phone</p></td>
 	<td valign="top" class="alt lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top"><p>Cell</p></td>
 	<td valign="top" class="lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top" class="alt"><p>eMail</p></td>
 	<td valign="top" class="alt lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   
   <tr>
 	<td valign="top"><p>Requested Date </p></td>
 	<td valign="top" class="lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top" class="alt"><p>Requested Time</p> </td>
 	<td valign="top" class="alt lft_bdr"><p>
 	  <input name="textfield" type="text" class="input">
 	</p></td>
   </tr>
   <tr>
 	<td valign="top"><p>Comments</p></td>
 	<td valign="top" class="lft_bdr"><p>
 	  <textarea name="textarea"></textarea>
 	</p></td>
   </tr>
   <tr>
 	<td valign="top" class="alt" >&nbsp;</td>
 	<td valign="top" ><p class="alt">
 	  <input type="submit" name="Submit" value="Submit">
 	</p></td>
   </tr>
 </table>
 </form>
 </body>
 </html>
 

Conradical,

Thanks so much! That was more than I expected. You’ve made my day.

Thanks
Jodi :0)

Not a problem. Thats why they pay me the big bucks at sitepoint! :shifty:

Lol!

Off Topic:

You are lucky conrad ! you are lucky :lol:

well that is a very nice form to start with ! :wink:
Always avoid the mailto:you@email.com :wink: