L’attributo tabindex

Utilizzando il tasto “tab” della tastiera l’utente può passare da un campo del form all’altro. Per varie ragioni di impaginazione l’ordine così ottenuto potrebbe però non essere quello desiderato. Grazie all’attributo “tabindex” che si applica ai campi dei moduli è possibili specificare in quale ordine deve avvenire il passaggio da un campo all’altro. Il valore di questo attributo può variare tra 0 e 32767. Vediamo un esempio:

<form action=”datiUtente”>
 <fieldset>
  <legend>Dati utente</legend>

  <table width=”300″ border=”1″ cellspacing=”0″ cellpadding=”5″>
   <tr>
    <td>
     <label>Nome:
      <input tabindex=”1″ name=”nome” type=”text” size=”30″ maxlength=”30″/>
     </label>
    </td>
    <td>
     <label>Professione:
      <input tabindex=”3″ name=”professione” type=”text” size=”30″ maxlength=”100″/>
     </label>
    </td>
   </tr>

   <tr>
    <td>
     <label>Cognome:
      <input tabindex=”2″ name=”cognome” type=”text” size=”30″ maxlength=”30″/>
     </label>
    </td>
    <td> </td>
   </tr>
  </table>
 </fieldset>
</form>

che viene così visualizzato:

come si può vedere, digitando il tasto “tab”, l’ordine di passaggio da un campo all’altro non è quello indicato nell’HTML, ma è modificato secondo il valore di “tabindex”.

Il layout dei form

Se siete alle vostre prima pagine HTML, può apparire difficile avere il controllo perfetto dei form. Si trovano validi suggerimenti tra gli articoli correlati alla guida:

• I Form: segreti e trucchi di personalizzazione
• I Form: risposte a domande frequenti