Tabular (X)HTML forms
- by detly
I have a set of items that can be in various states. I want to allow a user to use an (X)HTML form to
change the state, and
easily view the state of a group of objects
...so to this end, I'd like a layout like:
| item1 | radio button for state 1 | radio for state 2 | ... | [update button] |
| item2 | radio button for state 1 | radio for state 2 | ... | [update button] |
etc. I prefer the radio buttons to list boxes so that it's easy for a user to visually scan for things in a certain state.
It seemed like perfectly tabular data to me. The only problem is, you can't have forms inside a table that cross table cells (ie. <tr> <form> <td> ... is invalid).
I thought, "hey, I could have one giant form wrapping a table, and make the [update button] value contain the IDs for each row!" Turns out certain versions of IE send ALL THE SUBMIT BUTTON VALUES on any single form.
So I thought perhaps to to lay it out with <div>s and place the forms inside a single <td>. But then they break a line on each <div>. So I fixed their width and made them float: left. But then they wrap inside the table cells if the table row is wider than the page, and the radio controls don't line up with the headings.
Is it possible to lay this out as I intend? The XHTML below shows the intended structure. Observe what happens if you resize the browser window below the width of the table (ideally, the name would break or the table would show a scroll bar).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test</title>
<style type="text/css">
.state-select, .thing-state-name, .update {
float: left;
width: 8em;
}
.state-select {
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="thing-name-header">Thing</th>
<th>
<div class="thing-state-name">Present</div>
<div class="thing-state-name">Absent</div>
<div class="thing-state-name">Haven't looked</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>
<form action="something" method="post">
<input type="hidden" name="id" value="1" />
<div class="state-select"><input type="radio" name="presence" value="present" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>
</form>
</td></tr>
<tr>
<td>Orange</td>
<td>
<form action="something" method="post">
<input type="hidden" name="id" value="2" />
<div class="state-select"><input type="radio" name="presence" value="present" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>
</form>
</td></tr>
<tr>
<td>David Bowie</td>
<td>
<form action="something" method="post">
<input type="hidden" name="id" value="3" />
<div class="state-select"><input type="radio" name="presence" value="present" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" checked="checked" /></div>
<div class="update"><input type="submit" value="Update" /></div>
</form>
</td></tr>
</tbody>
</table>
</body>
</html>
