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

About

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.

Example

<form id="form-of-rows">
<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
</table>
</form>
  • 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 = entries.next();
while (!result.done) {
	console.log("Input: Name: "+result.value[0]+", value: "+result.value[1]);
	result = entries.next();
}
  • Result:

Powered by ComboStrap