Forma dentro de una mesa
Estoy incluyendo algunos formularios dentro de una tabla HTML para agregar nuevas filas y actualizar las filas actuales. El problema que tengo es que cuando inspecciono los formularios en mis herramientas de desarrollo, veo que los elementos del formulario se cierran inmediatamente después de abrirlos (las entradas, etc. no están incluidas en el formulario).
Como tal, enviar un formulario no incluye los campos.
La fila de la tabla y las entradas son las siguientes:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
Cualquier ayuda sería genial, gracias.
No se permite que un formulario sea un elemento secundario de a table, tbodyo tr. Intentar colocar uno allí tenderá a hacer que el navegador mueva el formulario para que aparezca después de la tabla (dejando atrás su contenido (filas de la tabla, celdas de la tabla, entradas, etc.).
Puede tener una tabla completa dentro de un formulario. Puede tener un formulario dentro de una celda de la tabla. No se puede tener parte de una tabla dentro de un formulario.
Utilice un formulario alrededor de toda la mesa. Luego use el botón Enviar en el que se hizo clic para determinar qué fila procesar (para ser rápido) o procesar cada fila (lo que permite actualizaciones masivas).
HTML 5 introduce el form atributo . Esto le permite proporcionar un formulario por fila fuera de la tabla y luego asociar todo el control de formulario en una fila determinada con uno de esos formularios usando su id.
Utilice el atributo "formulario" si desea guardar su marcado:
<form method="GET" id="my_form"></form>
<table>
<tr>
<td>
<input type="text" name="company" form="my_form" />
<button type="button" form="my_form">ok</button>
</td>
</tr>
</table>
(*Campos de formulario fuera de la etiqueta <formulario>)
Si desea una "cuadrícula editable", es decir, una estructura similar a una tabla que le permita convertir cualquiera de las filas en un formulario, use CSS que imite el diseño de la etiqueta TABLE: display:table, display:table-rowy display:table-cell.
No es necesario envolver toda la tabla en un formulario ni crear un formulario y una tabla separados para cada fila aparente de la tabla.
Pruebe esto en su lugar:
<style>
DIV.table
{
display:table;
}
FORM.tr, DIV.tr
{
display:table-row;
}
SPAN.td
{
display:table-cell;
}
</style>
...
<div class="table">
<form class="tr" method="post" action="blah.html">
<span class="td"><input type="text"/></span>
<span class="td"><input type="text"/></span>
</form>
<div class="tr">
<span class="td">(cell data)</span>
<span class="td">(cell data)</span>
</div>
...
</div>
El problema de envolver toda la TABLA en un FORMULARIO es que todos y cada uno de los elementos del formulario se enviarán al enviar (tal vez sea lo deseado, pero probablemente no). Este método le permite definir un formulario para cada "fila" y enviar solo esa fila de datos al enviar.
El problema de envolver una etiqueta FORM alrededor de una etiqueta TR (o TR alrededor de un FORM) es que no es HTML válido. El FORMULARIO seguirá permitiendo el envío como de costumbre, pero en este punto el DOM está roto. Nota: Intente obtener los elementos secundarios de su FORM o TR con JavaScript, puede generar resultados inesperados.
Tenga en cuenta que IE7 no admite estos estilos de tabla CSS e IE8 necesitará una declaración de tipo de documento para entrar en modo "estándar": (pruebe este o algo equivalente)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Cualquier otro navegador que admita display:table, display:table-row y display:table-cell debería mostrar su tabla de datos CSS de la misma manera que lo haría si estuviera usando las etiquetas TABLE, TR y TD. La mayoría lo hace.
Tenga en cuenta que también puede imitar THEAD, TBODY, TFOOT envolviendo sus grupos de filas en otro DIV con display: table-header-groupy table-row-grouprespectivamente table-footer-group.
NOTA: Lo único que no puedes hacer con este método es colspan.
Mira esta ilustración: http://jsfiddle.net/ZRQPP/
