Creating a form using CSS

Please excuse if this is a stupid question, but this is my first website. I'm trying to create a form and I can't get the field labels to line up with the field input text fields.

Also there is a difference between the spacing in Mozilla and Internet Explorer 7.
How can I get them to be consistent?http://www.aerialandhandlingservices.com/Contact%20form.html

I haven't used tables and I've tried to use CSS using float left and float right. I've also changed the &nbsp to a <br>. What am I doing wrong?!!

Any help gratefully received, or if anyone has a good script I could just use!

Thanks

 

I suggest you add a class to your css for the text portion of the form with some top padding and then apply that to the names. You may need to play with it a bit to get them to line as you want.

There may also be a better way that I do not know.

 

There isn't enough room on the line to allow for your label width and text input boxes. Reduce the label width from 200px to make that fit.

 

Well, what you are doing wrong on that page is a bit of a list, the biggest item on that list being that you appear to be using dreamweaver (Which as I've quoted from a recently departed friend a billion times, the only thing you can learn from Dreamweaver is how not to build a website)

But as to your actually form... You have the div around it instead of inside it, so you have no block level element to contain your form tags - which technically is what fieldsets are for... Though to use a fieldset you'd need a LEGEND tag. There is no reason for a form to EVER have a name tag on it, and the generic 'form1' ID isn't all that helpful either. In general all your element names need a lot of work since those 'layer1' 'layer2' automatic names dreamweaver saddled you with aren't all that helpful.

Cross browser fieldsets can be unpredictable, so an extra div wrapping the fieldset is a good idea, and legends are also unpredictable, so give that a dummy span inside it...

From there we have all those paragraph tags for no good reason. From a semantics point of view those elements are NOT paragraphs of text and you've already said what they are - labels and inputs, so get rid of that nonsense. The empty paragraphs between them also being completely wasted markup since you want space between them, that's what padding and margins are for.

... and 'dual floating' elements? Usually not worth the headaches. If we move the input inside the label, set the label to wrap floats and then float the input right, we don't need a left float or width.

So, for markup that would be something like:

<form id="contactUs" method="post" action="">

	<fieldset>
	
		<legend><span>Contact Us</span></legend>
		
		<label for="name">
			<input
				type="text"
				name="name"
				id="name"
			/>
			Name
		</label><br />
		
		<label for="company">
			<input
				type="text"
				name="company"
				id="company" />
			Company
		</label><br />
		
		<label for="email">
			<input
				type="text"
				name="email"
				id="email"
			/>
			E-mail address
		</label><br />
		
		<label for="telephone">
			<input
				type="text"
				name="telephone"
				id="telephone" />
			Telephone Number
		</label><br />
		
		<label for="subject">
			<textarea
				name="subject"
				id="subject"
				rows="5"
			></textarea>
			Subject
		</label><br />
		
		<input type="submit"
			value="Submit"
			class="submit"
		/>
		
	</fieldset>
	
</form>

Code (markup):

With this or something akin to it for CSS:

#contactUs {
	display:block;
	overflow:hidden;
	width:500px;
	position:relative;
	padding-top:1.7em;
}

#contactUs fieldset {
	/*
		While fieldsets are good for accessibility on many
		alternative browsers, they are a miserable /FAIL/ on
		screen devices, so to have it both ways, we put the
		fieldset in the markup, then strip it of formatting
		with CSS.
	*/
	border:0;
	margin:0;
	padding:0;
}

#contactUs legend span {
	/*
		Legends are required for a proper fieldset, but they
		too do not format consistently cross-browser. By padding
		the top of our form and setting it to position:relative
		we can usually safely position a Legend's content
		with a dummy span 
	*/
	position:absolute;
	top:0.2em;
	left:200px;
	width:300px;
	text-align:center;
	font:bold 100%/130% arial,helvetica,sans-serif;
}

#contactUs label {
	/* 
		By wrapping our input in a label we can dual-purpose
		the container - which means we don't need any extra tags
		in there. The line-breaks are a good idea for when CSS
		is disabled, but may apply more space between our elements
		than desired, or not enough - adjust that bottom margin
		as desired for that. 
	*/
	display:block;
	overflow:hidden; /* wrap floats */
	width:100%; /* trip haslayout, wrap floats IE */
	text-align:center;
	margin-bottom:-0.5em; /* tighten them up a little */
}

#contactUs label input,
#contactUs label textarea {
	/* 
		by putting our input/textarea first inside our labels, 
		we can make them the only thing in the whole form that
		are floating. Setting the span to wrap floats in all 
		browsers means we don't even need to worry about float 
		clearing either!
	*/
	float:right;
	width:300px;
}

#contactUs .submit {
	/*
		input widths are a quirky thing, rather than trying to 
		float the submit to line it up, using a margin works 
		better though really you'll NEVER get it 100% identical
		across all browsers since nobody agrees on what the 
		default appearance of a input is supposed to be!
	*/
	width:300px;
	margin:0 0 0 200px;
}

Code (markup):

I put some heavy comments in the CSS to explain things a bit.

You may want to consider tossing that steaming pile of manure known as dreamweaver in the trash, and pick up Ian Lloyd's "Build Your Own Web Site The Right Way Using HTML & CSS" from SitePoint - or from a local bookseller and I've even seen it in some libraries. It's the only book I've encountered that could be considered a 'modern' treatise on the subject... If you are just starting out, it's a must-read. You'll be able to skip right past a lot of the bull dreamweaver is telling you to use like that mm_swap javascript nonsense (which was bad practice a decade ago and has no business on a modern website), and get you into using semantic markup instead of 'DIV for everything with meaningless names' - which is probably just making learning how to do this even harder than it already is.

Hope this helps.

 

Thanks everyone - and especially DeathShadow! I didn't realise Dreamweaver was the devil's spawn!! I shall get the book, great suggestion. Thanks so much for the detailed tutorial and code.