Form inside a table

Question

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    lt tr gt       lt form method  post  action    gt           lt td gt               lt input type  text  name  job num  gt           lt  td gt            lt td gt               lt input type  text  name  desc  gt           lt  td gt       lt  form gt   lt  tr gt    Any help would be great  thank you

User · Accepted Answer

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.

User · Answer

Use the  quot form quot  attribute  if you want to save your markup   lt form method  quot GET quot  id  quot my form quot  gt  lt  form gt    lt table gt       lt tr gt           lt td gt               lt input type  quot text quot  name  quot company quot  form  quot my form quot    gt               lt button type  quot button quot  form  quot my form quot  gt ok lt  button gt           lt  td gt       lt  tr gt   lt  table gt     Form fields outside of the  lt  form  gt  tag

User · Answer

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    lt style gt  DIV table        display table    FORM tr  DIV tr       display table-row    SPAN td       display table-cell     lt  style gt       lt div class  table  gt       lt form class  tr  method  post  action  blah html  gt           lt span class  td  gt  lt input type  text   gt  lt  span gt           lt span class  td  gt  lt input type  text   gt  lt  span gt       lt  form gt       lt div class  tr  gt           lt span class  td  gt  cell data  lt  span gt           lt span class  td  gt  cell data  lt  span gt       lt  div gt           lt  div gt    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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt    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

[html] Form inside a table

Examples related to html

Examples related to firebug

Examples related to html-table

Examples related to forms