Add form to table rows

Question

Which is a valid way (if any) to add a form to table rows?

I have the following situation:

<table>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
</table>

How can I add a form element and still have valid HTML?

<table>
  <form>
    <tr>
      <td><input type="text" name="q"></td>
      <td><input type="text" name="a"></td>
      <td><input type="submit" name="submit" value="Submit"></td>
    </tr>
  </form>
</table>

Is invalid (at least I think it is)

Beneficent

Answer 1

Wrap your table inside the form element:

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

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

Rakish

Why wouldn't I want to use tables for tabular data? – Beneficent

In your particular example it's ok for wrapping a table inside a form. On the other hand you may lose information or your users may get confused, because if they are entering more than one row at a time, this data will be lost! – Rakish

I have setup a demo page to show you your problem: tableinsideform.heroku.com – Rakish

Answer 2

Tables and forms are separate concepts in HTML. People sometimes confuse them with each other. The conceptual confusion is often accompanied with confused markup. On the other hand, tables and forms can be "mixed" in a sense. Specifically, you can put a table inside a form or vice versa, and it is often useful to do so. But you need to understand what you are doing.

Tables and forms can be nested either way. But if you put forms into tables, each form must be completely included into a single table cell (one TD element in practice). Thereby the forms are each completely independent.

AFAIK It is valid to use tables in order to format the form.

Catarinacatarrh

Sorry screwed up format of question. What are my options with the table in the question? – Beneficent

First that HTML is not valid because you have not closed <input> tags. It should be like this: <input type="text" name="q" /> Are you asking where to put <form> tags or can you have multime <form> elements inside single table? You should put <form> tags outside of table. – Catarinacatarrh

@Igor – it isn't XHTML. The slash isn't required (and in HTML 4 is just plain wrong) – Hunsaker

@Igor: self closing tags is def. not needed for HTML – Beneficent

Answer 3

    <form action="/" name="form1">
<table>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
</table>

    </form>

or

    <table>
    <tr>
        <td colspan="2">  <form action="/" name="form1"></td>
    </tr>
  <tr>
    <td><input type="text" name="q"></td>
    <td><input type="text" name="a"></td>
    <td><input type="submit" name="submit" value="Submit"></td>
  </tr>
<tr><td colspan="2">  </form></td></tr>

......

</table>

Blackstone

do you need for every single row a new <input type="submit" name="submit" value="Submit"> ? – Blackstone