Estou incluindo alguns formulários dentro de uma tabela HTML para adicionar novas linhas e atualizar as linhas atuais. O problema que estou enfrentando é que, quando inspeciono os formulários nas minhas ferramentas de desenvolvimento, vejo que os elementos do formulário são fechados imediatamente após a abertura (entradas, etc, não são incluídas no formulário).
Dessa forma, o envio de um formulário falha ao incluir os campos.
A linha da tabela e as entradas são as seguintes:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>Qualquer ajuda seria ótimo, obrigado.
html
firebug
html-table
forms
Alex
fonte
fonte
<form>não pode ser colocado dentro<tr>.<tr>.Respostas:
Um formulário não pode ser um elemento filho de a
table,tbodyoutr. Tentar colocá-lo lá tenderá a fazer com que o navegador mova o formulário para ele após a tabela (deixando seu conteúdo - linhas da tabela, células da tabela, entradas, etc - para trás).Você pode ter uma tabela inteira dentro de um formulário. Você pode ter um formulário dentro de uma célula da tabela. Você não pode ter parte de uma tabela dentro de um formulário.
Use um formulário ao redor da tabela inteira. Em seguida, use o botão de envio clicado para determinar qual linha processar (para ser rápida) ou processar todas as linhas (permitindo atualizações em massa).
HTML 5 introduz o
formatributo . Isso permite que você fornecer um formulário para cada linha fora da tabela e, em seguida, associar todo o controle de formulário em uma determinada linha com uma dessas formas usando seuid.fonte
<form>dentro dos<table>padrões?Use o atributo "formulário" , se desejar salvar sua marcação:
(* Campos de formulário fora da tag <form>)
Veja também os 2 primeiros comentários
fonte
Se você quer um "grid editável", isto é uma tabela como a estrutura que permite que você faça qualquer uma das linhas de um formulário, use CSS que imita o layout da marca TABLE:
display:table,display:table-row, edisplay:table-cell.Não é necessário agrupar toda a tabela em um formulário e criar um formulário e tabela separados para cada linha aparente da tabela.
Tente isso:
O problema de agrupar toda a tabela em um formulário é que todos e quaisquer elementos do formulário serão enviados no envio (talvez isso seja desejado, mas provavelmente não). Este método permite definir um formulário para cada "linha" e enviar apenas essa linha de dados no envio.
O problema de agrupar uma marca FORM em torno de uma marca TR (ou TR em torno de um FORM) é que ele é HTML inválido. O FORM ainda permitirá o envio como de costume, mas neste momento o DOM está quebrado. Nota: Tente obter os elementos filhos do seu FORM ou TR com JavaScript, pois isso pode levar a resultados inesperados.
Observe que o IE7 não suporta esses estilos de tabela CSS e o IE8 precisará de uma declaração de tipo de documento para colocá-la no modo "padrões": (tente este ou algo equivalente)
Qualquer outro navegador que suporte display: table, display: table-row e display: table-cell deve exibir sua tabela de dados css da mesma forma que faria se você estivesse usando as tags TABLE, TR e TD. A maioria deles faz.
Observe que você também pode imitar THEAD, TBODY, TFOOT envolvendo seus grupos de linhas em outro DIV com
display: table-header-group,table-row-groupetable-footer-grouprespectivamente.NOTA: A única coisa que você não pode fazer com esse método é colspan.
Confira esta ilustração: http://jsfiddle.net/ZRQPP/
fonte