Tables and Forms

[chazzy]

So just wanted to get a couple of opinions (again).
When you guys build your forms, do you typically use table layouts/pseudo tables (divs acting as tables) for your forms, or do you just leave it the way it renders naturally, IE, something like this:
<label for="codefile">Select file:</label><input name="codefile" type="file" />

or


<div>
<div style="width:75px;"><label for="codefile">Select file:</label><br />
<label for="article">Associate with this article</label></div>
<div>
<input name="codefile" type="file" /><br />
<select...>
</div>
</div>


I hope that gives you enough of the picture because i haven't written the markup yet.

[NogDog]

I usually use this format:

<form action="#" method="post">
<fieldset>
<legend>Title</legend>
<p>
<label for="input_id">Label:</label>
<input type="text" name="input_id" id="input_id" size="20" maxlength="20">
</p>
<p>
<label for="input_id_2">Label 2:</label>
<input type="text" name="input_id_2" id="input_id_2" size="20" maxlength="20">
</p>
<p id="submit"><input type="submit" value="Submit"></p>
</fieldset>
</form>

The CSS might be something like:

form {
margin: 0;
padding: 0;
}
fieldset {
border: solid 2px black;
width: 40em;
margin: 1em auto;
padding: 0.5em;
}
fieldset p {
margin: 0.5em 0;
}
legend {
font-size: large;
font-weight: bold;
}
label {
float: left;
width: 10em;
}

[chazzy]

Ok, maybe I'm just losing my mind, but I just copied and pasted what you have and I get this...
http://www.firesoft-dev.com/nogdog.html
erm..

[NogDog]

I left out the ending quote on each of the label fields. Should be:
[/code]
<label for="input_id_2">
[/code]

[David Harrison]

Just an FYI, as opposed to defining the relationship between a label and form field explicitily, (ie: using for and id), you can just do this:<form action="#" method="post">
<fieldset>
<legend>Title</legend>

<p>
<label>
Label:
<input type="text" name="input_id" size="20" maxlength="20">
</label>
</p>

<p>
<label>
Label 2:
<input type="text" name="input_id_2" size="20" maxlength="20">
</label>
</p>

<p id="submit">
<input type="submit" value="Submit">
</p>

</fieldset>
</form>And to answer your question, if I have a lot of form fields, generally I'll use a list.

Moved to HTML.

[NogDog]

Just an FYI, as opposed to defining the relationship between a label and form field explicitily, (ie: using for and id), you can just do this:...
Yeah, but it's harder to apply the CSS separately to the label when you do that. (The form element is then a child of the label element.)

[David Harrison]

Down to personal preference really, I find it easier to put the input's in the labels so that I don't have to worry about matching the for's and id's up, just copy and paste a few times and change the name attribute and text in the label.