Cómo Crear un Array o Objeto en Formularios de HTML

Si quieres crear un array en los formularios de html, debes de agregar el índice o llave del elemento en el atributo name de los input del formulario.

Para ello, debes pasar los nombres de los campos como si de una variable de javascript se tratara, es decir, si quieres agregar el primer elemento de un array, el nombre de input debe ser elements[0] y el segundo elemento sería elements[1] y así para los demás elementos.

Por otro lado, si quieres pasar una llave, lo puedes hacer de la misma manera elements[0][key]

Si aún no te queda, te dejo un ejemplo sobre cómo crear un objeto, un array simple, un array de objetos, un array anidado y un array de objetos anidado en formularios de html para que tengas una mejor idea de como funciona esta notación.

Objeto

Para este caso, simplemente debemos agregar las llaves al nombre del elemento.

<form action="/" method="post"> ... <input type="text" name="user[name]"> <input type="text" name="user[lastname]"> <input type="number" name="user[age]"> <button type="submit">submit</button> </form>
Formulario de HTML con Objeto

Array Simple

En este caso, simplemente tendremos un array de valores muy sencillo.

<form action="/" method="post"> ... <input type="text" name="items[0]"> <input type="text" name="items[1]"> <input type="text" name="items[2]"> <button type="submit">submit</button> </form>
Formulario de HTML con Array Simple

Array de Objetos

Por otro lado, un array de objetos contiene llaves, por lo que tendremos que mezclar la notación entre índices y llaves de la siguiente manera.

<form action="/" method="get"> ... <input type="text" name="brothers[0][name]"> <input type="text" name="brothers[0][lastname]"> <input type="number" name="brothers[0][age]"> <input type="text" name="brothers[1][name]"> <input type="text" name="brothers[1][lastname]"> <input type="number" name="brothers[1][age]"> <button type="submit">submit</button> </form>
Formulario de HTML con Array de Objetos

Array Anidado

Este caso también es sencillo, ya que son simplemente valores agrupados en arrays, por lo que únicamente deberemos usar índices para el formulario.

<form action="/" method="get"> ... <input type="text" name="brothers_fullnames[0][0]"> <input type="text" name="brothers_fullnames[0][1]"> <input type="text" name="brothers_fullnames[0][2]"> <button type="submit">submit</button> </form>
Formulario de HTML con Array Anidado

Array de Objetos Anidados

Este es el caso más completo, es decir, posee todos los ejemplos anteriores pero que si has entendido la notación también es muy sencillo.

<form action="/" method="get"> ... <input type="text" name="brothers[0][name]"> <input type="text" name="brothers[0][lastname]"> <input type="number" name="brothers[0][age]"> <input type="text" name="brothers[0][mother][name]"> <input type="text" name="brothers[0][mother][lastname]"> <input type="text" name="brothers[0][mother][nationalities][0]"> <input type="text" name="brothers[0][mother][nationalities][1]"> <input type="text" name="brothers[0][father][name]"> <input type="text" name="brothers[0][father][lastname]"> <input type="text" name="brothers[0][father][nationalities][0]"> <input type="text" name="brothers[0][father][nationalities][1]"> <input type="text" name="brothers[1][name]"> <input type="text" name="brothers[1][lastname]"> <input type="number" name="brothers[1][age]"> <input type="text" name="brothers[1][mother][name]"> <input type="text" name="brothers[1][mother][lastname]"> <input type="text" name="brothers[1][mother][nationalities][0]"> <input type="text" name="brothers[1][mother][nationalities][1]"> <input type="text" name="brothers[1][father][name]"> <input type="text" name="brothers[1][father][lastname]"> <input type="text" name="brothers[1][father][nationalities][0]"> <input type="text" name="brothers[1][father][nationalities][1]"> <button type="submit">submit</button> </form>
Formulario de HTML con Array de Objetos Anidados

Sugerencias

Aunque todos o la mayoría de frameworks de backend generan un request con todos los datos enviados, podría ser que esto no se haga o simplemente no uses un framework, por lo que en ese caso el backend deberá parsear los parámetros a un objeto para obtener la estructura de datos correcta.