Form Inside a Table

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.

Form inside Table in react.js

As the error said, you can't wrap the tbody tag in a form tag.
One of the alternatives would be to just wrap the input tag with the form instead of the entire table.

It would then look like this:

render() {
    return (
      <tbody>
        <tr>
          <td className="ui header">Name</td>
          <td>
            <form>
              <input type="text" placeholder="Name"/>
            </form>
          </td>
        </tr>
      </tbody>
    );
}

If you would prefer to have the whole table be within the same form tag, you will have to wrap the whole table and not just tbody.

render () {
    return (
      <form>
        <table>
            <tbody>
              <tr>
                <td className="ui header">Name</td>
                <td>
                    <input type="text" placeholder="Name"/>
                </td>
              </tr>
            </tbody>
        </table>
      </form>
    )
  }

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.

Form inside table or table inside form, which one is the right for valid Twitter Bootstrap markup?

The permitted contents of a tbody tag are zero or more tr tags, so your second example is not valid HTML.

You could move your form inside a table cell, but more commonly you will see a table inside a form instead of vice versa.

It also appears from your limited examples that you may be using a table for layout purposes, which I would urge you to reconsider.

Having problems with the form inside the table in HTML

I have modified your codes, please check below:

Move out the form from table;
Add </table>
Adjust the textarea;

<form name="application" method="post" action="">  <table cellpadding="10px">    <tr>        <th>Application Form</th>    </tr>    <tr>        <td>First Name:<input name="firstname" type="textbox" size="20"</td>        <td>Countries and places you wish to visit:</td>    </tr>    <tr>        <td>Last Name:<input type="textbox" size="20"></td>        <td rowspan="3" valign="top">          <textarea></textarea>        </td>    </tr>    <tr>        <td>Phone number:<input type="textbox" size="20"></td>    </tr>    <tr>        <td>Email:<input type="textbox" size="20"></td>    </tr>    <tr>       <th colspan="4">         <input type="submit" name="submit" id="submit" value="Submit">         <input type="reset" name="reset" id="reset" value="Reset">       </th>    </tr>  </table></form>

How to convert form inside table into JSON

You can get elements details by using document.getElementsByName("unitPrice") and document.getElementsByName("itemName")

Try this:

  function getFormData() {    let res = [];    let x = document.getElementsByName("unitPrice");    let y = document.getElementsByName("itemName");
    for (let i = 0; i < x.length; i++) {      let obj = {        "itemName": x[i].value,        "unitPrice": y[i].value      }      res.push(obj);    }    console.log(res);  }

  <form class="sales-order-form">    <table class="table">      <tbody>        <tr>          <th>Item Name</th>          <th>Unit Price</th>          <th>Quantity</th>          <th>Free Quantity</th>          <th>Sub Total</th>        </tr>        <tr>          <td><select class="form-control" name="itemName" style="width: 250px;">              <option></option>              <option>Option1</option>              <option>Option2</option>              <option>Option3</option>            </select></td>          <td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">          </td>        </tr>        <tr>          <td><select class="form-control" name="itemName" style="width: 250px;">              <option></option>              <option>Option1</option>              <option>Option2</option>              <option>Option3</option>            </select></td>          <td><input class="form-control" name="unitPrice" type="text" readonly="readonly" value="50">          </td>        </tr>      </tbody>    </table>  </form>  <button onclick="getFormData()">getFormData</button>

form within table-row tag

The tr doesn't allow form-tags as direct children. Most modern browsers will let you do a lot of crap and so you could use this - but I wouldn't call it OK. A better approach would be to but the complete form into one of the tds (tds allow text, forms, inline- and block-elements as children):

<table>
    <% for my $word ( @$words_2 ) { %>
        <tr>
            <td><%=$word%></td>
            <td>
              <form action="/blacklist" method="post">
                <input type="text" name="data" readonly hidden value="<%=$word%>" />
                <input class="remove" type="submit" value="Remove" />
              </form> 
            </td>
        </tr>
    <% } %>
</table>

or, a lot easier, simply use a link (but note that data gets sent using GET instead of POST - maybe you'll have to change something in your code that handles the blacklisting):

<table>
    <% for my $word ( @$words_2 ) { %>
        <tr>
            <td><%=$word%></td>
            <td><a href="/blacklist?data=<%=$word%>">Remove</a></td>
        </tr>
    <% } %>
</table>

How to put a hidden form inside a table?

For erb code to print the output of the methods you call you need to use the = for the <%= %> tags, just like you did for the fields and the submit button.

<%= form_for(:enrollment, url: enroll_path) do |f| %>
  <div class="actions">
    <%= f.hidden_field(:enrollment, :course_name => searchResult.name) %>
    <%= f.hidden_field(:enrollment, :user_id => current_user) %>
    <%= f.submit "Enroll"%>
  </div>
<% end %>

Form Inside a Table