Hi guys,
Seeing now that I've pretty much transitioned to doing complete layouts with css, I was wondering about the use of tables for displaying forms.
Are form elements and their labels considered tabular data that can be displayed using a table?
Thoughts, anyone?
Thanks!I think the general concensus has been that you could think of label=th and input=td so a table would have valid syntax. Lately I've been using a <div><label><input></div> sort of pattern to do it sans tables.I am not claiming this is the way to do it, but I was playing around with how to line up form elements without using tables and came up with this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Form</title>
<style type="text/css">
label {
display: block;
float: left;
clear: left;
width: 8em;
}
p.form {
margin: 2px;
padding: 2px;
}
div.form {
margin: 1em auto;
clear: both;
background-color: silver;
border: solid navy 2px;
padding: 1em;
width: 35em;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>A Form</h1>
<div class=form>
<form id="form" action="?" method="post">
<p class=form>
<label for="field1">This is a test:</label>
<input id="field1" type="text" size=20 maxlength=40>
</p>
<p class=form>
<label for="field2">Test2:</label>
<input id="field2" type="text" size=20 maxlength=40>
</p>
<p class=form>
<label for"select">My Select List:</label>
<select id="select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</p>
<p class=form>
<label for="area">Text Area:</label>
<textarea id="area" cols=40 rows=10>This is a test.</textarea>
</p>
</form>
</div>
</body>
</html>http://template-tk.ispi.net/dguide/index.v?fp=search_form&ac=adv_search&template=L1
<!-- m --><a class="postlink" href="http://template-tk.ispi.net/vdirectory/index.v?fp=Account_Login&ac=Register&template=L1">http://template-tk.ispi.net/vdirectory/ ... emplate=L1</a><!-- m --> (click this link, then you'll have to hit Refresh to see the page)
Just a couple of real-world examples that don't use tables for form layouts. But I still think tables are OK. It's really just your preference.Thanks for the prompt reply guys.
I also found this at A List A Part:
<!-- m --><a class="postlink" href="http://realworldstyle.com/forms.html">http://realworldstyle.com/forms.html</a><!-- m -->
In their sample, a div is being used for each row. In your guys' examples, a paragraph is being used. Would a paragraph work better than a div? Or the other way around?
I'm thinking this would just be someone's preference...No, my pattern uses divs for the rows. Ps don't really make sense because the contained information is NOT a paragraph.So semantically speaking, it's better to use divs.
Makes sense
Someone else had this idea and wrote a blog about it. Personally I wouldn't use tables, but Jona put forward quite a convincing arguement (<!-- m --><a class="postlink" href="http://www.cmmwebdesign.com/blog/chronicles/2004/12/12/displaying-your-forms">http://www.cmmwebdesign.com/blog/chroni ... your-forms</a><!-- m -->) for tables.Or lists could be just as valid... but there's jags of stuff on a google search on making forms display without tables. I think one of the things that can be a drag though is that form elements are actually tied to the OS re display.... Still I use lists quite happily....
<!-- m --><a class="postlink" href="http://blog.lindenlangdon.com/prototype2/contact.php">http://blog.lindenlangdon.com/prototype2/contact.php</a><!-- m -->
Norty Pig Web Development
Seeing now that I've pretty much transitioned to doing complete layouts with css, I was wondering about the use of tables for displaying forms.
Are form elements and their labels considered tabular data that can be displayed using a table?
Thoughts, anyone?
Thanks!I think the general concensus has been that you could think of label=th and input=td so a table would have valid syntax. Lately I've been using a <div><label><input></div> sort of pattern to do it sans tables.I am not claiming this is the way to do it, but I was playing around with how to line up form elements without using tables and came up with this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Form</title>
<style type="text/css">
label {
display: block;
float: left;
clear: left;
width: 8em;
}
p.form {
margin: 2px;
padding: 2px;
}
div.form {
margin: 1em auto;
clear: both;
background-color: silver;
border: solid navy 2px;
padding: 1em;
width: 35em;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1>A Form</h1>
<div class=form>
<form id="form" action="?" method="post">
<p class=form>
<label for="field1">This is a test:</label>
<input id="field1" type="text" size=20 maxlength=40>
</p>
<p class=form>
<label for="field2">Test2:</label>
<input id="field2" type="text" size=20 maxlength=40>
</p>
<p class=form>
<label for"select">My Select List:</label>
<select id="select">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</p>
<p class=form>
<label for="area">Text Area:</label>
<textarea id="area" cols=40 rows=10>This is a test.</textarea>
</p>
</form>
</div>
</body>
</html>http://template-tk.ispi.net/dguide/index.v?fp=search_form&ac=adv_search&template=L1
<!-- m --><a class="postlink" href="http://template-tk.ispi.net/vdirectory/index.v?fp=Account_Login&ac=Register&template=L1">http://template-tk.ispi.net/vdirectory/ ... emplate=L1</a><!-- m --> (click this link, then you'll have to hit Refresh to see the page)
Just a couple of real-world examples that don't use tables for form layouts. But I still think tables are OK. It's really just your preference.Thanks for the prompt reply guys.
I also found this at A List A Part:
<!-- m --><a class="postlink" href="http://realworldstyle.com/forms.html">http://realworldstyle.com/forms.html</a><!-- m -->
In their sample, a div is being used for each row. In your guys' examples, a paragraph is being used. Would a paragraph work better than a div? Or the other way around?
I'm thinking this would just be someone's preference...No, my pattern uses divs for the rows. Ps don't really make sense because the contained information is NOT a paragraph.So semantically speaking, it's better to use divs.
Makes sense
Someone else had this idea and wrote a blog about it. Personally I wouldn't use tables, but Jona put forward quite a convincing arguement (<!-- m --><a class="postlink" href="http://www.cmmwebdesign.com/blog/chronicles/2004/12/12/displaying-your-forms">http://www.cmmwebdesign.com/blog/chroni ... your-forms</a><!-- m -->) for tables.Or lists could be just as valid... but there's jags of stuff on a google search on making forms display without tables. I think one of the things that can be a drag though is that form elements are actually tied to the OS re display.... Still I use lists quite happily.... <!-- m --><a class="postlink" href="http://blog.lindenlangdon.com/prototype2/contact.php">http://blog.lindenlangdon.com/prototype2/contact.php</a><!-- m -->
Norty Pig Web Development