HTML Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way

Question

I can best describe this as follows   I want this  entire table in editmode and save button in every row     lt table gt       lt tr gt           lt td gt Id lt  td gt           lt td gt Name lt  td gt           lt td gt Description lt  td gt           lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt input type  hidden  name  id  value  1    gt  lt  td gt           lt td gt  lt input type  text  name  name  value  Name    gt  lt  td gt           lt td gt  lt input type  text  name  description  value  Description    gt  lt  td gt           lt td gt  lt input type  submit  value  Save    gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt input type  hidden  name  id  value  2    gt  lt  td gt           lt td gt  lt input type  text  name  name  value  Name2    gt  lt  td gt           lt td gt  lt input type  text  name  description  value  Description2    gt  lt  td gt           lt td gt  lt input type  submit  value  Save    gt  lt  td gt       lt  tr gt       lt  -- and more rows here     -- gt   lt  table gt    Where should I put the  lt form gt  tags

User · Answer

I had a similar question and this answer in question HTML: table of forms? solved it for me. (Not sure if it is XHTML, but it works in an HTML5 browser.)

You can use css to give table layout to other elements.

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

Then you use the following valid html.

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value="4" /></div>
    </form>
</div>

User · Answer

Im late to the party  but this worked great for me and the code should explain itself    lt script type  text javascript  gt      function formAJAX btn           var  form     btn  closest   action             var str    form find   name    serialize              post  form attr  action    str  function data                 do stuff                    lt script gt    HTML    lt tr action  scriptURL php  gt       lt td gt          Field 1  lt input type  text  name  field1   gt       lt  td gt       lt td gt          Field 2  lt input type  text  name  field2    gt       lt  td gt       lt td gt  lt button type  button  onclick  formAJAX this   gt Update lt  button gt  lt  td gt   lt  tr gt

User · Answer

lt table  gt    lt thead  gt       lt tr gt       lt th gt No lt  th gt  lt th gt ID lt  th gt  lt th gt Name lt  th gt  lt th gt Ip lt  th gt  lt th gt Save lt  th gt       lt  tr gt   lt  thead gt   lt tbody id  table data  gt             lt tr gt               lt td gt                    lt form method  POST  autocomplete  off  id  myForm 207  action  save php  gt                       lt input type  hidden  name  pvm  value  207  gt                        lt input type  hidden  name  customer records id  value  2  gt                        lt input type  hidden  name  name 207  id  name 207  value  BUR  IN MERYEM ONUK  gt                        lt input type  hidden  name  ip 207  id  ip 207  value  89 19 24 118  gt                     lt  form gt                   1               lt  td gt                lt td gt                   207               lt  td gt                lt td gt                    lt input type  text  id  nameg 207  value  BUR  IN MERYEM ONUK  gt                lt  td gt                lt td gt                    lt input type  text  id  ipg 207  value  89 19 24 118  gt                lt  td gt                lt td gt                   lt button type  button  name  Kaydet 207  class  searchButton  onclick  postData  myForm 207   207    gt SAVE lt  button gt               lt  td gt           lt  tr gt            lt tr gt               lt td gt                    lt form method  POST  autocomplete  off  id  myForm 209  action  save php  gt                       lt input type  hidden  name  pvm  value  209  gt                        lt input type  hidden  name  customer records id  value  2  gt                        lt input type  hidden  name  name 209  id  name 209  value  BALA BASAK KAN  gt                        lt input type  hidden  name  ip 209  id  ip 209  value  217 17 159 22  gt                    lt  form gt                   2               lt  td gt                lt td gt                   209               lt  td gt                lt td gt                    lt input type  text  id  nameg 209  value  BALA BASAK KAN  gt                lt  td gt                lt td gt                    lt input type  text  id  ipg 209  value  217 17 159 22  gt                lt  td gt                lt td gt                   lt button type  button  name  Kaydet 209  class  searchButton  onclick  postData  myForm 209   209    gt SAVE lt  button gt               lt  td gt           lt  tr gt    lt  tbody gt    lt  table gt    lt script gt   function postData formId keyy          alert document getElementById formId  length         alert document getElementById  name   keyy  value       document getElementById  name   keyy  value document getElementById  nameg   keyy  value      document getElementById  ip   keyy  value document getElementById  ipg   keyy  value         alert document getElementById  name   keyy  value       document getElementById formId  submit        lt  script gt

User · Answer

If you try to add a form warping a tr element like this    lt table gt   lt form gt   lt tr gt   lt td gt  lt input type  text   gt  lt  td gt   lt td gt  lt input type  submit   gt  lt  td gt   lt  tr gt   lt  form gt   lt  table gt    some browsers in the process of rendering will close form tag right after the  declaration leaving inputs outside of the element  something like this   lt table gt       lt form gt  lt  form gt       lt tr gt       lt td gt  lt input type  text   gt  lt  td gt       lt td gt  lt input type  submit   gt  lt  td gt       lt  tr gt       lt  table gt      This issue is still valid for  warping multiple table cells   As stereoscott said above  nesting tables are a possible solution which is not recommended   Avoid using tables

User · Answer

You can t  Your only option is to divide this into multiple tables and put the form tag outside of it  You could end up nesting your tables  but this is not recommended    lt table gt     lt tr gt  lt td gt  lt form gt       lt table gt  lt tr gt  lt td gt id lt  td gt  lt td gt name lt  td gt     lt  tr gt  lt  table gt     lt  form gt  lt  td gt  lt  tr gt   lt  table gt    I would remove the tables entirely and replace it with styled html elements like divs and spans

User · Answer

You just have to put the  lt form      gt  tag before  the  lt table gt  tag and the  lt  form gt  at the end   Hopte it helps

User · Answer

In fact I have the problem with a form on each row of a table  with javascript  actually jquery     like Lothre1 said   some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element   which makes my input fields OUTSIDE the form  therefore I can t access the children of my form through the DOM with JAVASCRIPT    typically  the following JQUERY code won t work        id form  input   each function     action         this is supposed to select all inputS     within the form that has an id   id form    BUT the above exemple doesn t work with the rendered HTML     lt table gt       lt form id  id form  gt  lt  form gt       lt tr id  tr id  gt       lt td gt  lt input type  text   gt  lt  td gt       lt td gt  lt input type  submit   gt  lt  td gt       lt  tr gt       lt  table gt    I m still looking for a clean solution  though using the TR  id  parameter to walk the DOM would fix this specific problem   dirty solution would be  for jquery        tr id  input   each function     action         this will select all the inputS    fields within the TR with the id  tr id    the above exemple will work  but it s not really  clean   because it refers to the TR instead of the FORM  AND it requires AJAX      EDIT   complete process with jquery ajax would be      init data string    the dummy init value  1 1 is just here     to avoid dealing with trailing  amp     and should not be implemented     though it works  var data str    1 1       for each input in the TR     tr id  input   each function        retrieve field name and value from the DOM  var field     this  attr  name     var value     this  val        iterate the string to pass the datas     so in the end it will render s g like      1 1 amp field1 name value1 amp field2 name value2      data str      amp     field         value            Sendind fields datawith ajax     to be treated    ajax    type  POST    url   target for the form treatment    data data string   success function msg         actions on success of the request              this way  the  target for the form treatment  should receive POST data as if a form was sent to him  appart from the post 1    1  but to implement this solution i would recommand dealing with the trailing   amp   of the data str instead    still I don t like this solution  but I m forced to use TABLE structure because of the dataTables jquery plugin

User · Answer

It s worth mentioning that this is possible in HTML5  using the  form  attribute for input elements    lt table gt       lt tr gt           lt td gt Id lt  td gt           lt td gt Name lt  td gt           lt td gt Description lt  td gt           lt td gt  amp nbsp  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt form id  form1  gt  lt input type  hidden  name  id  value  1    gt  lt  form gt  lt  td gt           lt td gt  lt input form  form1  type  text  name  name  value  Name    gt  lt  td gt           lt td gt  lt input form  form1  type  text  name  description  value  Description    gt  lt  td gt           lt td gt  lt input form  form1  type  submit  value  Save    gt  lt  td gt       lt  tr gt       lt tr gt           lt td gt  lt form id  form2  gt  lt input type  hidden  name  id  value  1    gt  lt  form gt  lt  td gt           lt td gt  lt input form  form2  type  text  name  name  value  Name    gt  lt  td gt           lt td gt  lt input form  form2  type  text  name  description  value  Description    gt  lt  td gt           lt td gt  lt input form  form2  type  submit  value  Save    gt  lt  td gt       lt  tr gt   lt  table gt    While clean in its lack of JS and use of original elements  unfortunately this isn t working in IE10

User · Answer

The answer of  wmantly is basicly  the same  as I would go for at this moment  Don t use  lt form gt  tags at all and prevent  inappropiate  tag nesting  Use javascript  in this case jQuery  to do the posting of the data  mostly you will do it with javascript  because only one row had to be updated and feedback must be given without refreshing the whole page  if refreshing the whole page  it s no use to go through all these trobules to only post a single row   I attach a click handler to a  update  anchor at each row  that will trigger the collection and  submit  of the fields on the same row  With an optional data-action attribute on the anchor tag the target url of the POST can be specified  Example html  lt table gt       lt tbody gt           lt tr gt               lt td gt  lt input type  quot hidden quot  name  quot id quot  value  quot row1 quot   gt  lt input name  quot textfield quot  type  quot text quot  value  quot input1 quot    gt  lt  td gt               lt td gt  lt select name  quot selectfield quot  gt                   lt option selected value  quot select1-option1 quot  gt select1-option1 lt  option gt                   lt option value  quot select1-option2 quot  gt select1-option2 lt  option gt                   lt option value  quot select1-option3 quot  gt select1-option3 lt  option gt               lt  select gt  lt  td gt               lt td gt  lt a class  quot submit quot  href  quot   quot  data-action  quot  exampleurl quot  gt Update lt  a gt  lt  td gt           lt  tr gt           lt tr gt               lt td gt  lt input type  quot hidden quot  name  quot id quot  value  quot row2 quot   gt  lt input name  quot textfield quot  type  quot text quot  value  quot input2 quot    gt  lt  td gt               lt td gt  lt select name  quot selectfield quot  gt                   lt option selected value  quot select2-option1 quot  gt select2-option1 lt  option gt                   lt option value  quot select2-option2 quot  gt select2-option2 lt  option gt                   lt option value  quot select2-option3 quot  gt select2-option3 lt  option gt               lt  select gt  lt  td gt               lt td gt  lt a class  quot submit quot  href  quot   quot  data-action  quot  different-url quot  gt Update lt  a gt  lt  td gt           lt  tr gt           lt tr gt               lt td gt  lt input type  quot hidden quot  name  quot id quot  value  quot row3 quot   gt  lt input name  quot textfield quot  type  quot text quot  value  quot input3 quot    gt  lt  td gt               lt td gt  lt select name  quot selectfield quot  gt                   lt option selected value  quot select3-option1 quot  gt select3-option1 lt  option gt                   lt option value  quot select3-option2 quot  gt select3-option2 lt  option gt                   lt option value  quot select3-option3 quot  gt select3-option3 lt  option gt               lt  select gt  lt  td gt               lt td gt  lt a class  quot submit quot  href  quot   quot  gt Update lt  a gt  lt  td gt           lt  tr gt       lt  tbody gt   lt  table gt   Example script       document  ready function               quot  submit quot   on  quot click quot   function event               event preventDefault                var url      this  data  quot action quot        quot undefined quot     quot   quot      this  data  quot action quot                 var row     this  parents  quot tr quot   first                var data   row find  quot input  select  radio quot   serialize                  post url  data  function result   console log result                            A JSFIddle

User · Answer

I d say you can  although it doesn t validate and Firefox will re-arrange the code  so what you see in  View generated source  when using Web Developer may well surprise   I m no expert  but putting   lt form action  someexecpage php  method  post  gt    just ahead of the   lt tr gt    and then using   lt  tr gt  lt  form gt    at the end of the row certainly gives the functionality  tested in Firefox  Chrome and IE7-9   Working for me  even if the number of validation errors it produced was a new personal best worst  No problems seen as a consequence  and I have a fairly heavily styled table  I guess you may have a dynamically produced table  as I do  which is why parsing the table rows is a bit non-obvious for us mortals  So basically  open the form at the beginning of the row and close it just after the end of the row

[html] HTML: Is it possible to have a FORM tag in each TABLE ROW in a XHTML valid way?

Examples related to html

Examples related to xhtml