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


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

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:

Powered by ComboStrap