Forma dentro de una mesa

239

Incluyo 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 abrirse (las entradas, etc., no están incluidas en el formulario).

Como tal, el envío de 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.

— Alex
fuente

<form>No se puede poner dentro <tr>.

— Derek 朕會功夫

Y olvidaste cerrar el <tr>.

— Derek 朕會功夫

Use display: table-row para su formulario y elimine la etiqueta de la tabla por completo. Vea mi respuesta aquí: stackoverflow.com/a/15600151/1038812

— Matthew

No puede, pero funciona ...

— Sandburg

Respuestas:

371

No se permite que un formulario sea un elemento hijo de a table, tbodyo tr. Intentar poner uno allí tenderá a hacer que el navegador mueva el formulario hasta que aparezca después de la tabla (mientras deja atrás su contenido: filas de tabla, celdas de tabla, entradas, etc.).

Puede tener una tabla completa dentro de un formulario. Puede tener un formulario dentro de una celda de tabla. No puede tener parte de una tabla dentro de un formulario.

Use un formulario alrededor de toda la mesa. Luego, use el botón Enviar enviado para determinar qué fila procesar (para ser rápido) o procesar cada fila (permitiendo 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 dada con uno de esos formularios usando su id.

— Quentin
fuente

Tenga cuidado al usar un formulario para toda la tabla, todos los campos se enviarán al servidor, incluso si están vacíos. ¡Podría ser una gran cantidad de datos! Para uso masivo / público, prefiera usar un cuadro de diálogo (formulario que no esté en la tabla) abierto desde un botón en esa fila.

— Loenix

@Loenix: es muy poco probable que ponga suficientes datos en la tabla para que sean una carga significativa en el ancho de banda de las personas (al menos en comparación con el tamaño de una página web típica). Exigir a los usuarios que carguen otra página entre elegir editar una fila y poder realizar sus cambios, OTOH, sería una interacción extra molesta que tendrían que realizar.

— Quentin

No necesita un botón de edición para la solución propuesta en la pregunta original.

— Quentin

¿Por qué lo prohibido <form>dentro de <table>las normas?

— 1234ru

@Qentin lo suficientemente justo. Es una pena que esto siga en pie después de dos décadas sin una razón obvia.

— 1234ru

188

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 <form>)

Ver también los primeros 2 comentarios

— Vladimir
fuente

Tenga en cuenta que esta solución solo es válida con HTML5.

— threenplusone

además, no funcionará en Internet Explorer más información aquí

— Souhaieb Besbes

El estado del atributo de formulario está "bajo consideración", lo que significa que debe ser muy paciente developer.microsoft.com/en-us/microsoft-edge/platform/status/… mientras tanto, puede probar este polyfill y ver si funciona para usted stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

Parece "en desarrollo" ahora, y está bien usarlo

— user1156544

@ user1156544 Ahora es compatible con Edge, pero no con IE. Si necesita admitir IE, no tiene suerte con esta solución. Mi plan es usar dos tablas para dos elementos de formulario (no puedo creer que tenga que hacer esto). Gracias Microsoft!

— Plutón

Si desea una "rejilla editable", es decir una tabla como la estructura que le permite realizar cualquiera de las filas una forma, el uso de CSS que imita el diseño de la etiqueta TABLE: display:table, display:table-row, y display:table-cell.

No es necesario ajustar toda la tabla en un formulario ni crear un formulario y una tabla separados para cada fila aparente de la tabla.

Intenta 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 con 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 eso 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 con envolver una etiqueta FORM alrededor de una etiqueta TR (o TR alrededor de un FORM) es que es HTML no válido. El FORMULARIO todavía permitirá enviar 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 es compatible con estos estilos de tabla CSS y IE8 necesitará una declaración doctype para ponerlo en modo "estándar": (pruebe con 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 si estuviera usando las etiquetas TABLE, TR y TD. La mayoría de ellos lo hacen.

Tenga en cuenta que también puede imitar THEAD, TBODY, TFOOT envolviendo sus grupos de filas en otro DIV con display: table-header-group, table-row-groupy table-footer-grouprespectivamente.

NOTA: Lo único que no puede hacer con este método es colspan.

Vea esta ilustración: http://jsfiddle.net/ZRQPP/

— Mateo
fuente

+1 por mencionar esto no permite colspan ... que debo haber perdido la primera lectura ;-)

— Johannes Rudolph

Esa debería ser la respuesta marcada en verde (incluso si no usa realmente la etiqueta de tabla)

— Alessio