Html: How to Have a Form Tag in Each Table Row in a Xhtml Valid Way

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

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:

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

I would remove the tables entirely and replace it with styled html elements like divs and spans.

Create a HTML table where each TR is a FORM

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/

Form inside a table

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.

Add form to table rows

Wrap your table inside the form element:

<form action="/" name="form1">
  <table>...</table>
</form>

But even better: Build your form without tables if possible.

Create a text form inside table row that stays after submission and updates database

I did some research and found out i did not have to use form but instead use 'contenteditable'. To edit the specific column i changed

<td><input type='text' name='name' value='<?NOT SURE WHAT TO INCLUDE HERE ?>'/></td>
<td><input type='submit' value='Save' id='" . $row['test_id'] . "' class='name' /></td>

to this:

<td class='name' data-id1='" . $row['test_id'] . "' contenteditable='true'>".$row['name']."</td>

and for my jquery i added the following:

<style>
.editMode{
       border: 1px solid black;
      }
</style>
<script type="text/javascript">
$(document).ready(function(){

 // Add Class
 $('.name').click(function(){
  $(this).addClass('editMode');
 });

 // Save data
 $(".name").focusout(function(){
  $(this).removeClass("editMode");
  var id = $(this).closest('tr').find("td:nth-child(2)").text();;
  var value = $(this).text();

  $.ajax({
   url: 'name_edit.php',
   type: 'post',
   data: { value:value, id:id },
   success:function(response){
    alert('Edits Saved');
    return false;
   }
  });

 });

});
</script>

and in the php side, i simply did the following:

<?php include 'dbh.php' ?>
<?php
$conn = mysqli_connect($servername, $username, $password, $database);

$field = $_POST['field'];
$value = $_POST['value'];
$id= $_POST['id'];

$sql = "UPDATE test_data SET name='".$value."' WHERE test_id='".$id."'";

mysqli_query($conn,$sql);

echo 1;

?>

HTML: table of forms?

The trick here is to just use a single form, e.g.

    <form>
      <table>
        <!-- rows... -->
      </table>
      <p><input type="submit" value="Update quantity"></p>
    </form>

Say you have a product snake with id 6. You then name the input for that item's quantity field quantity[6].

I don't know what server side language you are using, but in PHP you can then iterate over the quantites and update based on the ID. You'd get an array like this:

$_POST['quantity'] = array(
    '6' => 4
)

Repeated forms per table row using Angularjs

Well, thanks to @pegatron and the Stack Overflow link he provided using @tjbp answer I ended up using the form attribute of input fields and that did it for me. Though its not been tested on all browsers, it does the trick of HTML5 validations. Here's what I ended up with.

<tr ng-repeat="item in items">
 <form ng-submit="updateItem(item)" id="{{item.title}}">
       <td ng-bind="$index + 1"></td>
       <td ng-bind="item.title"></td>
       <td><button form="{{item.title}}">Submit</button></td>
 </form></tr>

And with this the form and its linked inputs gets sent with the button click.
Thanks.

Is a form valid over a tr ?

I recomment using the w3c validator http://validator.w3.org/. And no its not valid :-)