Form Inside Table HTML

When you work with a table that displays editable data, you can create a form inside the HTML table and it allows users to directly change the content in the table cells. We can create form elements for each row in the table, such as text input, radio, checkbox, or dropdown, that correspond to the data displayed. The user can update values ​​within table cells by interacting with form inputs and it provides a convenient and efficient way to edit table data.

What is the form inside a table?

We should create an input form in a particular table cell. We can create an HTML table using <table> tag, a table row using the <tr> tag, and a table cell using the <td> tag. You can’t create an input form inside the <table> or <tr> tags because they are not tags for a table cell. So, we need to create an input form inside the <td> tag, only then the input will box display correctly within a table cell.

We don’t need to use <form> tag for every form we create. We can create form elements using direct <input> tag. So, Combining forms and tables provides a more streamlined and intuitive user experience, especially when dealing with large datasets or complex data entry scenarios.
.

<table>
 <tr>
  <td> <input type="text"> </td>
 </tr>
</table>

Why should we create a form inside a table?

If you have a scenario like below, you can create a form inside a table:

• When you have tabular data that needs to be editable, placing a form inside the table allows users to modify the data directly within the table structure.
• If you want to provide users with a way to enter new data into specific cells or columns of a table
• If you need to perform batch actions on multiple rows or cells of a table. For example, you can include checkboxes or select dropdowns in each row to allow users to select multiple rows for deletion, editing, or other actions.
• In some cases, you may need to collect and process data from multiple form inputs within a table.

Step by Step to create a form inside the table

Step 1: Create a table

We can create an HTML table using the <table> tag, a table row using the <tr> tag, a table heading using the <th> tag, and a table cell using the <td> tag. We should create a table cell inside the table row. To display the table border, we need to use table border attribute and set the value to 1.

Syntax:

<table>
 <tr>
  <td> This is table Cell </td>
 </tr>
</table>

Step 2: Create an input form inside the table

We can create an input form using <input> tag for creating a radio button, input text, checkbox, etc. We should create an input form within the <td> tag like

<tr>
  <td>Name :</td>
  <td> <input type="text"> </td>
</tr>

In this code, we have created the <tr> tag and inside it two <td> tags. We put the text “name” inside the 1st <td>. And we create input text inside the 2nd <td>.

Step 3: Close the form and continue the table structure:

After defining the form fields, close the <form> element. Ensure that the form tag is properly closed before continuing with the remaining table rows and cells. This will ensure the form is contained within the desired table section.

Step 4: Repeat for additional form elements:

If you require multiple forms within the table or want to include forms in other rows or cells, repeat steps 2-5 for each form element.

Example Code

<table border="1">
      <tr>
         <td>Name :</td>
         <td><input type="text"> </td>
      </tr>
      <tr>
         <td>Email :</td>
         <td><input type="email"> </td>
      </tr>
      <tr>
         <td>Sex :</td>
         <td><input type="radio"  name="sex"> Male<br>
             <input type="radio"  name="sex">Female </td>
      </tr>
      <tr>
         <td>Address :</td>
         <td> <textarea></textarea> </td>
      </tr>
      <tr>
         <td></td>
         <td colspan="2"><input type="submit"> </td>
      </tr>
   </table>

Live preview:

See the Pen
form inside table html by Wonderdevelop (@wonderdevelop)
on CodePen.

Conclusion

So, to create a form inside the table, we need to create a table using HTML “<table>” tag. Then add table rows using <tr> tag and then we need to create table cells by using <th> or <td> tags. Finally, insert form elements using the <input> tag between the “<td>” element.