HTML: È possibile avere un tag FORM in ogni TABLE ROW in modo valido XHTML?

Question

Posso meglio descriverlo come segue:

Voglio questo (intera tabella in editmode e salvare il pulsante in ogni riga).

<table> 
    <tr> 
     <td>Id</td> 
     <td>Name</td> 
     <td>Description</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><input type="hidden" name="id" value="1" /></td> 
     <td><input type="text" name="name" value="Name" /></td> 
     <td><input type="text" name="description" value="Description" /></td> 
     <td><input type="submit" value="Save" /></td> 
    </tr> 
    <tr> 
     <td><input type="hidden" name="id" value="2" /></td> 
     <td><input type="text" name="name" value="Name2" /></td> 
     <td><input type="text" name="description" value="Description2" /></td> 
     <td><input type="submit" value="Save" /></td> 
    </tr> 
    <!-- and more rows here ... --> 
</table> 

Dove devo inserire i tag <form>?

Answer 1

Non è possibile. L'unica opzione è dividere questo in più tabelle e inserire il tag del modulo al di fuori di esso. Si potrebbe finire per nidificare le tabelle, ma questo non è raccomandato:

<table> 
    <tr><td><form> 
    <table><tr><td>id</td><td>name</td>...</tr></table> 
    </form></td></tr> 
</table> 

vorrei rimuovere le tabelle del tutto e sostituirlo con elementi HTML in stile come div e campate.

Answer 2

Non devi fare altro che inserire il tag prima del tag <table> e il numero </form> alla fine.

Saltare aiuta.

Answer 3

Direi che è possibile, anche se non convalida e Firefox riorganizzerà il codice (quindi quello che si vede in 'Visualizza sorgente generata' quando si usa Web Developer può sorprendere). Non sono un esperto, ma mettendo

<form action="someexecpage.php" method="post"> 

poco prima della

<tr> 

e quindi utilizzando

</tr></form> 

alla fine della riga di certo dà la funzionalità (testato in Firefox , Chrome e IE7-9). Lavorando per me, anche se il numero di errori di validazione che ha prodotto è stato un nuovo best/worst personale! Nessun problema visto come conseguenza, e ho un tavolo abbastanza pesantemente stilizzato. Immagino che tu possa avere una tabella prodotta dinamicamente, come faccio io, ed è per questo che analizzare le righe della tabella è un po 'non ovvio per noi mortali. Quindi, in pratica, apri il modulo all'inizio della riga e chiudilo subito dopo la fine della riga.

Answer 4

Se si tenta di aggiungere un modulo di deformazione di un elemento tr come questo

<table> 
<form> 
<tr> 
<td><input type="text"/></td> 
<td><input type="submit"/></td> 
</tr> 
</form> 
</table> 

alcuni browser nel processo di rappresentazione si chiuderà tag form a destra dopo la dichiarazione lasciando ingressi esterno dell'elemento

qualcosa di simile

<table> 
    <form></form> 
    <tr> 
    <td><input type="text"/></td> 
    <td><input type="submit"/></td> 
    </tr> 
    </table> 

Questo problema è ancora valido per deformare più celle di tabella

Come detto sopra, le tabelle di nidificazione sono una soluzione possibile che non è consigliata. Evitare l'uso di tabelle.

Answer 5

In realtà ho il problema con un modulo a ogni riga di una tabella, con javascript (in realtà jquery):

come Lothre1 ha detto, "alcuni browser nel processo di rappresentazione si chiuderà tag form a destra dopo il dichiarazione lasciando ingressi esterno dell'elemento"

che rende i miei campi di ingresso al di fuori della forma, quindi non posso accedere i figli della mia forma attraverso il DOM e JavaScript ..

tipicamente, il seguente codice di won jQuery funziona:

$('#id_form :input').each(function(){/*action*/}); 
// this is supposed to select all inputS 
// within the form that has an id ='id_form' 

ma quanto sopra exemple non funziona con il rendering HTML:

<table> 
    <form id="id_form"></form> 
    <tr id="tr_id"> 
    <td><input type="text"/></td> 
    <td><input type="submit"/></td> 
    </tr> 
    </table> 

sto ancora cercando una soluzione pulita (anche se con il TR 'id' parametro di percorrere il DOM sarebbe risolvere il problema problema specifico)

soluzione sporca sarebbe (per jQuery):

$('#tr_id :input').each(function(){/*action*/}); 
// this will select all the inputS 
// fields within the TR with the id='tr_id' 

quanto sopra exemple funziona, ma non è davvero "pulito", perché si riferisce alla inste TR ANNUNCIO DEL MODULO, e richiede AJAX ...

EDIT: processo completo con jQuery/ajax sarebbero:

//init data string 
// the dummy init value (1=1)is just here 
// to avoid dealing with trailing & 
// and should not be implemented 
// (though it works) 
var data_str = '1=1'; 
// for each input in the TR 
$('#tr_id :input').each(function(){ 

//retrieve field name and value from the DOM 
var field = $(this).attr('name'); 
var value = $(this).val(); 

//iterate the string to pass the datas 
// so in the end it will render s/g like 
// "1=1&field1_name=value1&field2_name=value2"... 
data_str += '&' + field + '=' + value; 


}); 

//Sendind fields datawith ajax 
// to be treated 
$.ajax({ 
type:"POST", 
url: "target_for_the_form_treatment", 
data:data_string, 
success:function(msg){ 
    /*actions on success of the request*/ 
}); 
}); 

in questo modo, il "target_for_the_form_treatment" dovrebbe ricevere i dati POST come se una forma era inviato a lui (appart dal post [1] = 1, ma per implementare questa soluzione vorrei raccomandare di trattare con il file finale "&" di data_str invece).

ancora non mi piace questa soluzione, ma sono costretto a utilizzare la struttura delle tabelle a causa del DataTables plugin jQuery ...

Answer 6

avevo una domanda simile e rispondere this answer in questione HTML: table of forms? risolto per me . (Non sono sicuro che sia XHTML, ma funziona in un browser HTML5).

È possibile utilizzare css per assegnare il layout della tabella ad altri elementi. Sebbene sia stato testato solo su Chrome.

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

Quindi si utilizza il seguente html valido.

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

Answer 7

Sono in ritardo per la festa, ma questo ha funzionato bene per me e il codice dovrebbe spiegarsi;

<script type="text/javascript"> 
    function formAJAX(btn){ 
     var $form = $(btn).closest('[action]'); 
     var str = $form.find('[name]').serialize(); 
     $.post($form.attr('action'), str, function(data){ 
      //do stuff 
     }); 
    } 
<script> 

HTML:

<tr action="scriptURL.php"> 
    <td> 
     Field 1:<input type="text" name="field1"/> 
    </td> 
    <td> 
     Field 2:<input type="text" name="field2" /> 
    </td> 
    <td><button type="button" onclick="formAJAX(this)">Update</button></td> 
</tr> 

Answer 8

Vale la pena ricordare che questo è possibile in HTML5, utilizzando l'attributo "forma" per elementi di input:

<table> 
    <tr> 
     <td>Id</td> 
     <td>Name</td> 
     <td>Description</td> 
     <td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td> 
     <td><input form="form1" type="text" name="name" value="Name" /></td> 
     <td><input form="form1" type="text" name="description" value="Description" /></td> 
     <td><input form="form1" type="submit" value="Save" /></td> 
    </tr> 
    <tr> 
     <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td> 
     <td><input form="form2" type="text" name="name" value="Name" /></td> 
     <td><input form="form2" type="text" name="description" value="Description" /></td> 
     <td><input form="form2" type="submit" value="Save" /></td> 
    </tr> 
</table> 

Sebbene pulite nella sua mancanza di JS e l'uso di elementi originali, purtroppo questo non funziona in IE10.