Search code examples
htmlformsfirefoxhtml-tablemarkup

Multiple forms in one table, but Firefox is changing my mark up automagically?


I'm trying to make a table that has one webform per table row. The problem is, when I display the page in Firefox, it closes off my form tags immediately. Am I not allowed to have multiple forms in a table? EDIT: I am running jQuery plugin "uniform" but I disabled it, and get the same result.

My code:

<table callpadding="0" cellspacing="0">
<tr>
<td>id</td>
<td>name</td>
<td>type</td>
<td>clickable</td>
<td>live</td>
<td>save</td>
</tr>

<?php foreach($rows as $row): ?>
<tr>
<form>
<input type="hidden" name="table_bl" value="navigation" />
<input type="hidden" name="id_bl" value="<?php echo stickyRow($row['id'],''); ?>" />
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['page_name']; ?></td>
<td><?php echo $row['page_type']; ?></td>
<td>
<input type="hidden" name="clickable" value="0" />
<input type="checkbox" name="clickable" value="1" <?php echo stickyCheck($row['clickable'],'1'); ?> />
</td>
<td>
<input type="hidden" name="live" value="0" />
<input type="checkbox" name="live" value="1" <?php echo stickyCheck($row['live'],'1'); ?> />
</td>
<td><a class="submit">save</a></td>
</form>
</tr>
<?php endforeach; ?>
</table>

Firefox turns it into (note the closing of the form tags):

<tbody><tr>
<td>id</td>
<td>name</td>
<td>type</td>
<td>clickable</td>
<td>live</td>
<td>save</td>
</tr>

<tr>
<form></form>

<input name="table_bl" value="navigation" type="hidden">
<input name="id_bl" value="001" type="hidden">
<td>001</td>
<td>Narrative Biography</td>
<td>html</td>
<td>
<input name="clickable" value="0" type="hidden">
<div class="checker"><span class="checked"><input style="opacity: 0;" name="clickable" value="1" checked="checked" type="checkbox"></span></div>
</td>
<td>
<input name="live" value="0" type="hidden">
<div class="checker"><span class="checked"><input style="opacity: 0;" name="live" value="1" checked="checked" type="checkbox"></span></div>
</td>

<td><a class="submit">save</a></td>

</tr>
<tr>
<form></form>
<input name="table_bl" value="navigation" type="hidden">
<input name="id_bl" value="002" type="hidden">
<td>002</td>
<td>Complete Biography</td>
<td>html</td>
<td>
<input name="clickable" value="0" type="hidden">
<div class="checker"><span class="checked"><input style="opacity: 0;" name="clickable" value="1" checked="checked" type="checkbox"></span></div>

</td>
<td>
<input name="live" value="0" type="hidden">
<div class="checker"><span class="checked"><input style="opacity: 0;" name="live" value="1" checked="checked" type="checkbox"></span></div>
</td>
<td><a class="submit">save</a></td>

</tr>
</tbody>

I'm sure it is changing my mark up to be valid, but why, and what should I do? Multiple tables? That seems less than elegant.


Solution

  • Your HTML is invalid and Firefox is doing its best to make sense of it. A table row (i.e.: <tr> tag) can only contain normal or header cells (i.e.: <td> and <th> tags). Multiple tables is easiest, with PHP doing the hard work for you.