How to add a form tag in each table row in HTML?

Spread the love

To add a form tag in each table row in HTML, we add a form element and reference the form with the form attribute in the inputs.

For instance, we write

<table>
  <tr>
    <td>Id</td>
    <td>Name</td>
    <td>Description</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>
      <form id="form1"><input type="hidden" name="id" value="1" /></form>
    </td>
    <td><input form="form1" type="text" name="name" value="Name" /></td>
    <td>
      <input form="form1" type="text" name="description" value="Description" />
    </td>
    <td><input form="form1" type="submit" value="Save" /></td>
  </tr>
  <tr>
    <td>
      <form id="form2"><input type="hidden" name="id" value="1" /></form>
    </td>
    <td><input form="form2" type="text" name="name" value="Name" /></td>
    <td>
      <input form="form2" type="text" name="description" value="Description" />
    </td>
    <td><input form="form2" type="submit" value="Save" /></td>
  </tr>
</table>

to add a table with the form element in the first td element of each row.

Then we add inputs to the other td elements and reference the form by its ID with the form attribute.

Leave a Reply

Your email address will not be published. Required fields are marked *