Do forms qualify as tabular data?

[Arta]

I wondered what other people think about this.

I've recently made the switch from HTML 4.01 to XHTML1.1. One of the biggest headaches, as is generally the case, is abandoning tables for layout.

I'm pleased with the results of my switch for the most part, except for one thing: forms. The XHTML/CSS I end up with for forms, which uses floating labels to align input/select/textarea elements, really doesn't seem like an improvement over a table. It has problems, too: if the window is too small, the label text for elements has to wrap - this doesn't happen gracefully. It breaks the layout quite a bit. Also, due to the vagueries of browsers' CSS implementation, elements sometimes don't align: checkboxes don't align with textboxes under IE.

I might just be missing some CSS trick that sorts all this out, but it seems to me that forms actually do qualify as tabular data, and  tables are just better as a mechanism for presenting forms nicely.

Comments?

[R.a.B.B.i.T]

You can still use tables.  The XHTML validator has no problems with my pages which use tables (note: I use transitional/loose).  You DO have to handle some of the properties through CSS though, such as height, bordercolors, etc..., which can be a pain.

[Arta]

I know you can use tables. My point is that I'm wondering if people think that using a table for a form is a misuse of the table element, which was designed for displaying tabular data, and not for controlling layout.

[Arta]

By using a label element with the width specified using css.

[R.a.B.B.i.T]

Fuck misuse.  If it works it works.  It's just visual, so it can't hurt

[Akamas]

I wrote a form thats made of span and CSS, not sure if it'll solve your problem.

Code Select Expand


<style>
.row {
clear: both;
padding-top: 5px;
}

.label {
float: left;
width: 100px;
text-align: right;
}

.form {
float: right;
width: 235px;
text-align: left;
}
.container {
width: 400px;
}
</style>
<div class="container">
<form>
<div class="row"><span class="label">Name:</span><span class="form"><input type="text" size="25" /></span></div>
<div class="row"><span class="label">Age:</span><span class="form"><input type="text" size="25" /></span></div>
<div class="row"><span class="label">Email:</span><span class="form"><input type="text" size="25" /></span></div>
<div class="row"><span class="label">Comments:</span><span class="form"><textarea cols="25" rows="8"></textarea></span>
</form>
</div>


[Arta]

That's basically what I'm doing, except I'm using a <label> element rather than a span.

Another problem: The width of my containing div is 100%. When you resize the page down, the form elements extend across the right-hand border of the div. I think putting them in a table might stop that, but I haven't tried yet.

[Akamas]

Why not just create a div that has a fixed width and surround that around your form?

[R.a.B.B.i.T]

That's basically what I'm doing, except I'm using a <label> element rather than a span.

Another problem: The width of my containing div is 100%. When you resize the page down, the form elements extend across the right-hand border of the div. I think putting them in a table might stop that, but I haven't tried yet.

I never thought I'd have to ask Arta this, but: Got a URL or some code?

[Arta]

Sure.

I tried a fixed div, doesn't work.

Code Select Expand

<div style="adminformwrap">
<label class="adminform" for="Type">Protocol:</label> <select class="adminform" name="Type">

<option value="b">Battle.net</option>
<option value="d">D2GS</option>
<option value="r">Realm/MCP</option>
<option value="n">Botnet</option>
<option value="u">Battle.net/Game UDP</option>
<option value="l">BNLS</option>
</select> <br />


<div><label class="adminform" for="MessageID">Message ID:</label> <input class="adminform" type="text" name="MessageID" id="MessageID" value="" /></di>

<div><label class="adminform" for="FormalName">Formal Name:</label> <input class="adminform" type="text" name="FormalName" id="FormalName" value="" /> </div>

<div class="adminform"><input class="checkbox" type="checkbox" name="NameInvented" id="NameInvented" value="1" />  <label for="NameInvented">Check this box if this formal name has been invented</label> </div>

<div><label class="adminform" for="Sender">Sender:</label>
<select class="adminform" name="Sender">
<option value="C">Client</option>

<option value="S">Server</option>
</select> </div>

<div><label class="adminform" for="Sender">Status:</label>
<select class="adminform" name="Sender">
<option value="0.5">Public Draft</option>
<option value="1">Public</option>
<option value="2">Private</option>

<option value="3">Draft (Editors only)</option>
<option value="4">Draft (Administrators only)</option>
</select> </div>

<div><label class="adminform" for="Name">Remarks Summary:</label> <input class="adminform" type="text" name="Name" id="Name" value="" /> </div>
<div><label class="adminform" for="Description">Remarks:</label> <textarea class="adminform" name="Description" id="Description"></textarea></div>

</div>
</div>


Code Select Expand


#contentSection label.adminform
{
float: left;
display: block;
width: 12em;
}

#contentSection div.adminformwrap
{
width: 30em;
}

#contentSection input.adminform
{
width: 20em;
}

#contentSection select.adminform
{
width: 20.5em;
}

#contentSection textarea.adminform
{
width: 20.5em;
height: 15em;
}

#contentSection div.adminform
{
padding-bottom: 5px;
margin-left: 12em;
}


[R.a.B.B.i.T]

Replacing all <lable>'s with <span> made it look pretty

Code Select Expand

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>
<title>span!</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div style="adminformwrap">
<span class="adminform" for="Type">Protocol:</span>
<select class="adminform" name="Type">
<option value="b">Battle.net</option>
<option value="d">D2GS</option>
<option value="r">Realm/MCP</option>
<option value="n">Botnet</option>
<option value="u">Battle.net/Game UDP</option>
<option value="l">BNLS</option>
</select>
<br />
</div>
<div>
<span class="adminform" for="MessageID">Message ID:</span>
<input class="adminform" type="text" name="MessageID" id="MessageID" value="" />
</div>

<div>
<span class="adminform" for="FormalName">Formal Name:</span>
<input class="adminform" type="text" name="FormalName" id="FormalName" value="" />
</div>

<div class="adminform">
<input class="checkbox" type="checkbox" name="NameInvented" id="NameInvented" value="1" />
<span for="NameInvented">Check this box if this formal name has been invented</span>
</div>

<div>
<span class="adminform" for="Sender">Sender:</span>
<select class="adminform" name="Sender">
<option value="C">Client</option>
<option value="S">Server</option>
</select>
</div>

<div>
<span class="adminform" for="Sender">Status:</span>
<select class="adminform" name="Sender">
<option value="0.5">Public Draft</option>
<option value="1">Public</option>
<option value="2">Private</option>
<option value="3">Draft (Editors only)</option>
<option value="4">Draft (Administrators only)</option>
</select>
</div>

<div>
<span class="adminform" for="Name">Remarks Summary:</span>
<input class="adminform" type="text" name="Name" id="Name" value="" />
</div>

<div>
<span class="adminform" for="Description">Remarks:</span>
<textarea class="adminform" name="Description" id="Description"></textarea>
</div>
</body>
</html>

I changed the CSS a tad:

Code Select Expand

span.adminform
{
float: left;
display: block;
width: 12em;
}

div.adminformwrap
{
width: 30em;
}

input.adminform
{
width: 20em;
}

select.adminform
{
width: 20.5em;
}

textarea.adminform
{
width: 20.5em;
height: 15em;
}

div.adminform
{
padding-bottom: 5px;
margin-left: 12em;
}

[Arta]

Mine looks like the second one already



And it does this when resized, which is annoying:

[Banana fanna fo fanna]

You probably want to use fieldsets and legends for this. See http://www.webmasterworld.com/forum83/374.htm

[Arta]

hmm, would a fieldset stop the form elements from breaking the boundary of the div? I'll try it, but I'm not convinced.

[R.a.B.B.i.T]

This is why I suggested span -.-
I've never had any overlaps with spans, and it would be easier to fix if I had the whole part :\