HTML: ¿tabla de formas?

Question

Con frecuencia me resulta deseoso hacer una tabla de formularios: un grupo de filas, cada fila es un formulario separado con sus propios campos y botón de envío. Por ejemplo, he aquí una aplicación tienda de animales ejemplo - imaginar se trata de una pantalla de pago que le da la opción de actualizar las cantidades y características de los animales que ha seleccionado y guardar los cambios antes de salir:

Pet Quantity Color Variety Update 
snake   4 black rattle update 
puppy   3 pink dalmatian update 

me gustaría ser capaz de hacer esto usando HTML que se ve así:

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead> 
<tbody> 
    <tr> 
      <form> 
      <td>snake<input type="hidden" name="cartitem" value="55"></td> 
      <td><input name="count" value=4/></td> 
      <td><select name="color"></select></td> 
      <td><select name="variety"></select></td> 
      <td><input type="submit"></td> 
      </form> 
    </tr> 
</tbody> 
</table> 

ésta es básicamente una mesa llena de formas, una forma por fila. Pulsar actualizar una vez le permite actualizar esa fila específica (este no es un ejemplo real, mis aplicaciones reales realmente requieren independencia de filas).

Pero esto no es HTML válido. De acuerdo con las especificaciones, un <form> tiene que estar completamente dentro de un <td> o completamente fuera de un <table>. Este html no válido rompe las bibliotecas de JavaScript y es un gran problema.

Termino haciendo una tabla para contener encabezados de columna, y luego hacer una tabla por formulario. Pero esto requiere anchos de columna fijos para que las entradas estén alineadas en columnas ordenadas, lo cual es inferior a la media. ¿Cómo terminas lidiando con este problema? ¿Existe una solución obvia fácil que me falta? ¿Cómo hago una tabla de formularios?

Answer 1

El truco aquí es simplemente usar un solo formulario, p.

<form> 
     <table> 
     <!-- rows... --> 
     </table> 
     <p><input type="submit" value="Update quantity"></p> 
    </form> 

Digamos que tiene una serpiente producto con ID 6. A continuación, escribir en la entrada para la cantidad campo de cantidad [6] de ese elemento.

No sé qué idioma del lado del servidor está usando, pero en PHP puede iterar sobre las cantidades y actualizar según la ID. Obtendrá una matriz como esta:

$_POST['quantity'] = array(
    '6' => 4 
) 

Answer 2

Puede usar css para proporcionar el diseño de la tabla a otros elementos.

.table { display: table; } 
.table>* { display: table-row; } 
.table>*>* { display: table-cell; } 

Luego utiliza el siguiente html válido.

<div class="table"> 
    <form> 
     <div>snake<input type="hidden" name="cartitem" value="55"></div> 
     <div><input name="count" value=4/></div> 
    </form> 
</div>