Form e dati della UI

Un form è un componente di una pagina Web che, tramite elementi speciali detti controlli, consente all'utente di inserire dati da inviare al server per l'elaborazione. Senza entrare nel dettaglio delle specifiche HTML, i controlli sono l'insieme degli elementi che consentono l'immissione di dati, la selezione di valori o l'avvio di funzionalità da parte dell'utente, come ad esempio caselle di testo, checkbox, radio button, pulsanti e simili.

In realtà l'invio al server dei dati raccolti da un form dipende dal tipo di elaborazione: in certi casi è possibile eseguire l'elaborazione dei dati direttamente sul client tramite JavaScript.

Per form estremamente semplici, il processo di raccolta ed invio dei dati al server può essere effettuato senza la necessità di coinvolgere JavaScript, soprattutto con l'introduzione delle nuove funzionalità di HTML5 che prevedono una prima validazione dei dati inseriti dall'utente.

Tuttavia, se vogliamo avere un certo controllo sui dati e soprattutto se la loro elaborazione deve avvenire sul client non possiamo fare a meno di ricorrere a JavaScript. Vediamo in questa sezione come manipolare gli elementi di un form ed intervenire nelle diverse fasi dell'acquisizione dei dati.

Accesso a un form

Durante la generazione del DOM viene popolato un array contenente l'elenco degli oggetti che rappresentano i form presenti nella pagina. Questo array è accessibile tramite la proprietà forms dell'oggetto document. Ad esempio, il seguente codice determina quanti form sono presenti nella pagina corrente:

console.log(document.forms.length);

Per accedere ad un form specifico possiamo utilizzare il relativo indice dell'array:

var myForm = document.forms[0];

Questo metodo risulta chiaramente poco affidabile dal momento che l'indice dipende dalla posizione del form nella pagina: una modifica al markup ci costrigerebbe a verificare e/o modificare di conseguenza il codice JavaScript.

L'approccio migliore è quello di assegnare al form un identificatore tramite l'attributo id oppure un nome tramite l'attributo name. Nel primo caso possiamo accedere al form come a qualsiasi elemento del DOM:

<form id="myForm">
	<!-- ... -->
</form>
<script>
var myForm = document.getElementById("myForm");
</script>

Se invece facciamo ricorso all'attributo name possiamo accedere nel modo seguente:

<form name="myForm">
<!-- ... -->
</form>
<script>
var myForm = document.forms.myForm;
</script>

Il nome assegnato al form aggiunge di fatto una proprietà all'array forms con lo stesso nome del valore dell'attributo name.

Un altro modo per accedere a un form cui è stata assegnato un nome consiste nell'utilizzare il metodo getElementsByName():

var myForm = document.getElementsByName("myForm")[0];

Questo metodo consente di accedere a qualsiasi elemento a cui è stato assegnato un nome tramite l'attributo name. Da notare che, mentre l'attributo id è utilizzato per identificare un elemento nel DOM e pertanto non dovrebbero esistere più elementi con lo stesso id, è possibile avere più elementi con lo stesso valore per l'attributo name, come vedremo più avanti. Per questo motivo il metodo getElementsByName() restituisce un array di oggetti.

Accesso ai controlli di un form

Ciascun oggetto form contiene un array in cui sono contenuti i suoi controlli. È possibile accedere a questi controlli tramite indice utilizzando direttamente l'oggetto form:

var primoControllo = document.forms.myForm[0];

oppure, sempre tramite indice, sfruttando la proprietà elements dell'oggetto form:

var primoControllo = document.forms.myForm.elements[0];

Anche per i controlli è possibile sfruttare l'attributo name ed accedere direttamente ad essi come abbiamo visto per le form. Ad esempio, se abbiamo la seguente form:

<form name="myForm">
<p><label>Nome:    <input type="text" name="txtNome"/></label></p>
<p><label>Cognome: <input type="text" name="txtCognome"/></label></p>
</form>

possiamo accedere ai suoi controlli nel seguente modo:

var myForm     = document.forms.myForm;
var txtNome    = myForm.txtNome;
var txtCognome = myForm.txtCognome;

Rimane naturalmente sempre valida la possibilità di accedere ai controlli assegnando loro un id ed utilizzando il metodo getElementById() come per qualsiasi elemento del DOM.

Attributi id e name

È naturale chiedersi il perchè form e controlli abbiano questa doppia modalità di identificazione tramite l'attributo id, come per qualsiasi elemento del DOM, e tramite l'attributo name. Le motivazioni sono in parte storiche e in parte legate alla funzione di comunicazione con il server dei form.

L'attributo name viene utilizzato dal browser per costruire il contenuto da inviare al server. In altre parole, se in un form abbiamo una casella di testo definita come nell'esempio seguente:

<input type="text" id="nome" name="txtNome"/>

in fase di invio il browser invierà al server la coppia <nome controllo-valore>:

txtNome = Mario

Per sottolineare la differenza tra i due attributi possiamo dire che:

id	name
l'attributo id è utilizzato per identificare un qualsiasi elemento del DOM	l'attributo name è utilizzato per l'invio dei dati di un form al server; può essere utilizzato soltanto per un sottoinsieme degli elementi del DOM
deve essere univoco all'interno di una pagina	può non essere univoco nella pagina
può essere utilizzato nei fogli di stile CSS e consente di recuperare l'elemento con JavaScript tramite il metodo getElementById()	non può essere utilizzato nei fogli di stile CSS e può essere utilizzato con JavaScript tramite il metodo getElementsByName()