305

I'm including some forms inside a HTML table to add new rows and update current rows. The problem that I'm getting is that when I inspect the forms in my dev tools, I see that the form elements are closed immediately after opening (inputs, etc are not included within the form).

As such, submitting a form fails to include the fields.

The table row and inputs are as follows:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

Any help would be great, thank you.

4

4 Answers 4

465

A form is not allowed to be a child element of a table, tbody or tr. Attempting to put one there will tend to cause the browser to move the form to it appears after the table (while leaving its contents — table rows, table cells, inputs, etc — behind).

You can have an entire table inside a form. You can have a form inside a table cell. You cannot have part of a table inside a form.

Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates).

HTML 5 introduces the form attribute. This allows you to provide one form per row outside the table and then associate all the form control in a given row with one of those forms using its id.

11
  • 4
    Take care using one form for the entire table, all fields will be send to server, even if they are empty. It could be a huge amount of data !!! Please for mass/public usage, prefer to use a dialog (form not in table) opened from a button in that row.
    – Loenix
    Feb 13, 2016 at 10:41
  • 2
    @Loenix: It is very unlikely that you'll put enough data in the table for it to be a significant burden on people's bandwidth (at least when compared to the size of a typical webpage). Requiring users to load another page between choosing to edit a row and being able to make their changes, OTOH, would be an annoying extra interaction that they would have to perform.
    – Quentin
    Feb 13, 2016 at 10:55
  • 1
    It's still an extra interaction for the user (and negates the possibility of doing batch updates).
    – Quentin
    Feb 13, 2016 at 21:53
  • 1
    You don't need an edit button for the solution proposed in the original question.
    – Quentin
    Feb 15, 2016 at 7:50
  • 5
    @Qentin fair enough. It's a pity this still stands after two decades with no obvious reason.
    – 1234ru
    Aug 12, 2017 at 11:39
249

Use the "form" attribute, if you want to save your markup:

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(*Form fields outside of the < form > tag)

7
60

If you want a "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.

There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.

Try this instead:

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.

The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that it's invalid HTML. The FORM will still allow submit as usual but at this point the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.

Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)

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

Any other browser that supports display:table, display:table-row and display:table-cell should display your css data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.

Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group and table-footer-group respectively.

NOTE: The only thing you cannot do with this method is colspan.

Check out this illustration: http://jsfiddle.net/ZRQPP/

3
  • 6
    +1 for mentioning this does not enable colspan... which I must have missed the first reading it through ;-) Mar 19, 2017 at 20:29
  • 2
    That should be the green checked answer (even if don't use really table tag)
    – Alessio
    May 3, 2019 at 13:22
  • " Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results." That´s exactly how I learned it despite this being a very old post. Who pays the "define standards" guys? I wan´t a word with them
    – alvaroc
    Apr 24, 2021 at 1:56
0

Even though, as Quentin mentioned, it is not allowed to put a form inside a table. We can workaround this limitation with slots which are used in web components.

First of all we need to create a template of our table in our HTML file:

<template id="my-table">
  <table>
    <tr>
      <td>first column</td>
      <td>second column <slot name="my-form"></slot></td>
      <td>third column</td>
    </tr>
  </table>
</template>

The slot element is an insertion point, elements with attribute slot="my-form" will be rendered inside of it.

Then we define a custom component in JS:

customElements.define(
  "my-table",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("my-table");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  }
);

In order to use slots we need to use shadow DOM, that's why we attach a shadow root to the custom element, it contains the content of the template.

Now we can go back to the HTML file and use the custom table component

<my-table>
  <form action="" slot="my-form">
    <input type="text" name="name" id="" />
    <button>Submit</button>
  </form>
</my-table>

The above form element references the named slot "my-form", therefore it will be placed inside of it.

This workaround works because the form element isn't explicitly placed inside the table. The form is simply rendered inside the slot element as shown here:

DOM structure

Not the answer you're looking for? Browse other questions tagged or ask your own question.