Form elements

[zealivity5]

What is the proper technique to align form elements. For example:

name: [input]
email: [input]

[loupblanc]

I put the label in a div with a fixed with a left float, the form element in a div with a left float, add a div after that which has "clear: both" and it does the trick for me. Much better than tables

[Centauri]

Don't need to put things in divs if you declare the labels as labels

        	<p>
          	  <label for="name">Name :</label>
        	  <input name="name" type="text"  id="name" size="30">
        	</p>
        	<p>
        	  <label for="email">email :</label>
        	  <input name="email" type="text" id="email" size="30">
        	</p>

label {
	float: left;
	width: 5em;
	text-align: right;
	margin-right: 5px;
}

[Dan Schulz]

I wouldn't even use paragraphs for that (since form inputs are not paragraph text). Here's what I do (remove the space and forward slash from the BR and INPUT elements if not using "XHTML") :

<label for="name">Your Name:</label> <input type="text" id="name" name="name" size="30" /><br />
<label for="email">Your Email Address:</label> <input type="text" id="email" name="email" size="30" /><br />
<!-- (and so on) -->

If you're wondering why I have the name attribute on the form inputs, it's to act as a hook for server-side processing scripts to use.

Then I set the labels to clear (won't matter on the first label), then float to the left, and I give them a width (since you should give floated elements widths anyway).

Here's an example (I always set the margins and padding of everything to zero; most people seem to have problems with forms and form controls, but I don't - most of the time):

 
* {
    margin: 0;
    padding: 0;
}
 
#example-form label {
    clear: left;
    float: left;
    margin: 0.25em 0;
    width: 12em;
}
 
#example-form input {
    margin: 0.25em 0;
}

[zealivity5]

Thanks for all the input!