Form in struttura tabellare

[boooooooooooo]

Ciao a tutti,
ho bisogno di una struttura tabellare che recupera dei dati da un database e mi permette di modificare un campo per ogni riga restituita.
Es:

<form action="#">
<table>
<tr>
<th>intestazione 1</th><th>intestazione 2</th><th>intestazione da modificare</th>
</tr>
<tr>

<td>risultato 1 intestazione 1</td><td><label for="res1">risultato 1 intestazione 2</label><input type="text" id="res1" /></td><td>risultato 1 intestazione 3</td>

<td>risultato 2 intestazione 1</td><td><label for="res2">risultato 2 intestazione 2</label><input type="text" id="res2" /></td><td>risultato 2 intestazione 3</td>


<td>risultato 3 intestazione 1</td><td><label for="res3">risultato 3 intestazione 2</label><input type="text" id="res3" /></td><td>risultato 3 intestazione 3</td>
</tr>
<input type="submit" value="Go" />
/table>
</form>

Volevo chiedere a voi tutti gentilissimi se il codice è corretto e accessibile.

Grazie a tutti

 

[Eliox]

Racchiudi i campi di input tra:

<fieldset>...</fieldset>

Per il resto non vedo errori particolari, comunque verifica con l'apposito validatore per le porzioni di HTML.

 

[boooooooooooo]

Form in struttura tabellare senza label e th ridondante

Racchiudi i campi di input tra:

<fieldset>...</fieldset>

Per il resto non vedo errori particolari, comunque verifica con l'apposito validatore per le porzioni di HTML.

Grazie per la risposta Eliox,
se io volessi avere:

<td><input type="text"  /></td>

invece di:

<td><label for="res1">risultato 1 intestazione 2</label><input type="text" id="res1" /></td>

visto che inserire una label dentro una cella che ha già ha un riferimento (th) mi sembra ridondante e poco significativo,
è possibile una soluzione diversa tipo una label vuota o altro.
Grazie ancora

 

[borgo italia]

ciao
non è obbligatorio che tu metta la label (salvo fisime del w3c)

 

[Eliox]

La label aiuta il form ad essere più accessibile, in linea di massima la lascerei.

 

[boooooooooooo]

Label hidden

La label aiuta il form ad essere più accessibile, in linea di massima la lascerei.

Avendo a che fare con un portale di una PA, credo di doverla lasciare. Forse dandole una classe e da css renderla non visibile (visibility:hidden) potrebbe essere una soluzione per lo screen reader. Che ne dite?

 

[borgo italia]

ciao
potrebbe essere un'idea, però firse è meglio usare display:none; così non ti occupa spazio

<style type="text/css">
.a{visibility:hidden;}
.b{display:none;}
</style>
<table>
<tr><td><label for="res1" class="a">risultato 1 intestazione 2</label><input type="text" id="res1" /></td></tr>
<tr><td><label for="res1" class="b">risultato 1 intestazione 2</label><input type="text" id="res1" /></td></tr>
</table>

 

[boooooooooooo]

ciao
potrebbe essere un'idea, però firse è meglio usare display:none; così non ti occupa spazio

<style type="text/css">
.a{visibility:hidden;}
.b{display:none;}
</style>
<table>
<tr><td><label for="res1" class="a">risultato 1 intestazione 2</label><input type="text" id="res1" /></td></tr>
<tr><td><label for="res1" class="b">risultato 1 intestazione 2</label><input type="text" id="res1" /></td></tr>
</table>

Hai pienamente ragione!!

 

[Eliox]

In alternativa si potrebbe usare qualcosa del genere:

.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}

 

[boooooooooooo]

In alternativa si potrebbe usare qualcosa del genere:

.hidden{
position: absolute;
left: -9999px;
top: -9999px;
visibility: hidden;
}

Questa è la tecnica utilizzata per la sostituzione delle immagini di sfondo.
E' un'idea a cui avevo pensato e con cui otterrei lo stesso risultato della soluzione proposta da "borgo", ma dovrei scrivere alcune regole in più. Il che non è un dramma, ma è sempre indicato scrivere meno codice sia per motivi di peso che di manutenibilità.