How to create a HTML form for tabular data (rows)


This articles shows you how to create a form of rows (ie in a tabular form) like this one:

Form Tabular Data Illustration

The trick is that a form may contain several control element with the same name attribute. In this case, the server will receive an array of values for each name.


<form id="form-of-rows">
        <td><input type="number" name="id" value="1" readonly/></td>
        <td><input type="text" name="name" value="Foo" /></td>
        <td><input type="text" name="description" value="Fool" /></td>
        <td><input type="number" name="id" value="2" readonly/></td>
        <td><input type="text" name="name" value="Bar" /></td>
        <td><input type="text" name="description" value="Barré" /></td>
  • The below javascript client code uses the formdata method to retrieve the data from the form. On a server side, you would get an array of data (by name generally).
console.log("The data of the form are:");
let formData =  new FormData(document.getElementById('form-of-rows'));
// retrieve the entries in a entries variable of iterator type
let entries = formData.entries();
// loop over the iterator
let result =;
while (!result.done) {
	console.log("Input: Name: "+result.value[0]+", value: "+result.value[1]);
	result =;
  • Result:

Discover More
What is an HTML Form?

form is an element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken from the...

Share this page:
Follow us:
Task Runner