Descrizione form e moduli

Guida ai form e moduli

I campi di un form: come utilizzare il tag Input

Uno dei fattori che ha decretato il successo del Web è senz’altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo ( ad esempio mailing list ), ma soprattutto di partecipare a vere e proprie comunità virtuali. Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dell’utente: per farlo si utilizzano, in maniera molto semplice, i moduli ( cioè i form ). Per creare una pagina con dei moduli, bisogna utilizzare l’apposito tag FORM: si tratta di un elemento di blocco, come il < P >, e quindi il tag < FORM > lascia uno spazio prima dell’apertura e dopo la chiusura:

< FORM >...< / FORM >

Attributi di un Form

ACTION = " url "	indica l’URL del programma o della pagina di risposta che processerà i dati
NAME = " "	indica il nome del Form
METHOD = " valore "	indica il metodo di invio dei dati da parte del protocollo http
TARGET = " valore "	Grazie all’attributo TARGET è possibile far aprire i dati del form in una pagina differente rispetto a quella corrente

I valori dell'attributo METHOD possono essere GET o POST a seconda se si vogliono visualizzare i dati o no nella barra degli indirizzi di Explorer. Con il metodo GET, quindi, la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell’URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi ( più precisamente nella "query string", cioè nella "stringa di interrogazione" ) secondo questa forma:

http://www.miosito.it/esempioForm/paginaRisposta.php?nome=Wolfgang&cognome=Cecchin

i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo. Alcuni server hanno tuttavia hanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. Nel metodo POST invece l’invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string ( dunque se non si desidera che i parametri siano mostrati all’utente questo metodo è preferibile ). In questo caso non ci sono limiti sulla lunghezza dei caratteri.

Grazie all’ACTION è anche possibile far sì che i dati vengano inviati in e-mail al webmaster ( si tratta infatti a tutti gli effetti di un riferimento a un URL ). Il codice è questo:

< FORM ACTION = " mailto:tuamail@nomeDominio.it?subject=Oggetto predefinito " ENCTYPE = " text/plain " METHOD = " POST " >

L'attributo ENCTYPE serve per fissare il tipo di codifica dei dati inviati.

Abbiamo detto che il principale uso dei form è quello di realizzare pagine di compilazione dati in sequenza, ovviamente grazie anche all'uso dei bottoni che verranno trattati nel prossimo capitolo.

Non c’è form che si rispetti senza bottone di invio o un campo di inserimento di dati. La sintassi tradizionale per creare tale campo (detto appunto di INPUT perchè è destinato a contenere dati inseriti dall'utente) è:

Il Tag INPUT non necessita quindi di chiusura. L'attributo TYPE serve per specificare il tipo di campo o bottone, mentre l'attributo NAME il suo nome, mentre il VALUE la scritta che compare sul Submit Button o un valore di default del campo stesso. Fate presente che il valore di default dell'attributo VALUE verrà spedito tramite metodo html e quindi incluso nell'array POST, qualora il campo non fosse compilato dall'utente. E' quindi evidente che, affinchè i dati vengano inviati tramite metodo POST o GET (vedi qui per maggiori dettagli su tali metodi), i bottoni e gli altri campi di inserimento dati debbano essere contenuti in un Tag FORM:

Vediamo un esempio di modulo di compilazione di dati contenente semplicemente un input di inserimento dati ed un bottone di invio, e supponiamo di dare un valore di default al campo:

Nel caso in cui non si inserisse alcun valore e si cliccasse sul bottone, l'array POST che arriva al file controlla_form.php sarà: Array(nome = inserisci il tuo nome, bottone = ok) .

Vediamo ora i principali campi di un modulo di compilazione dati.

Inserire i bottoni per inviare dati

Submit Button

L'uso dell'attributo DISABLED nel Tag INPUT disabilita il bottone:

Reset Button

Serve per far resettare all'utente i valori da lui appena inseriti nel modulo di compilazione dati:

Permettere di effettuare delle scelte

Radio Button

<INPUT TYPE="radio" NAME="sesso" VALUE="M" > M

M
F

Anche in questo caso è possibile assegnare un valore di default ( CHECKED ) o disabilitare un pulsante usando l'attributo DISABLED nell'INPUT Tag ; così lo è entrambi:

CheckBox

Con i checkbox possiamo consentire all’utente di operare delle scelte multiple. Ad esempio:

<INPUT TYPE=" checkbox " NAME=" sesso " VALUE=" M " > M

M
F

Notare la differenza il Radio Button ( oltre alla forma )!!! Anche qui si possono usare gli attributi CHECKED e DISABLED.
Per la Check Box e per i Radio conviene sempre inserire un valore nell'attributo VALUE, poichè sarà proprio tale valore ad essere inviato con il form.

Select e Menù a tendina

Menù a Tendina

Le Select servono per consentire la scelta di una opzione tra molte da parte dell'utente. Il codice HTML per inserirne una è il seguente, in cui vanno personalizzati solo i valori delle OPTION stesse.

<SELECT NAME=" città ">
<OPTION value=" - inserisci la città - "> - inserisci la città - </OPTION>
<OPTION value=" Lucca " > Lucca </OPTION>
<OPTION value=" Roma " > Roma </OPTION>
<OPTION value= " Napoli " > Napoli </OPTION>
<OPTION value= " Pisa " > Pisa </OPTION>
</SELECT>

Quest'altro menù, invece consente di selezionare ed inviare più di una informazione:

<SELECT NAME =" città " MULTIPLE>
<OPTION value= " " > </OPTION>
<OPTION value= " Lucca " > Lucca </OPTION>
<OPTION value= " Roma " > Roma </OPTION>
<OPTION value= " Napoli " > Napoli </OPTION>
<OPTION value= " Pisa " > Pisa </OPTION>
</SELECT>

Notare come la larghezza del menù si fissi automaticamente in base alla larghezza del valore più grande in esso contenuto ( per il primo è: - inserisci la città - ). Se si usasse l'attributo SIZE = " n " nel Tag SELECT, potrei stabilirne in ogni caso la dimensione:

Usando l'attributo SELECTED per un dato valore, si fissa un valore predefinito:

<SELECT NAME = " qty " >
<OPTION value= " Lucca " > Lucca </OPTION>
<OPTION value= " Roma " SELECTED > Roma </OPTION>
<OPTION value= " Napoli " > Napoli </OPTION>
<OPTION value= " Pisa " > Pisa </OPTION>
</SELECT>

Siccome i menu di scelta tendono a diventare particolarmente lunghi, nell’HTML 4 è stato introdotto il tag OPTGROUP che consente di suddividere le varie possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette. Ecco l’esempio:

<SELECT NAME = " citta ">
<optgroup label = " citta in Italia " >
  <OPTION value= " Roma " > Roma </OPTION>
  <OPTION value= " Lucca " SELECTED > Lucca </OPTION>
  <OPTION value = " Firenze " > Firenze </OPTION>
</optgroup>
<optgroup label = " citta in Europa " >
  <OPTION value= " Parigi " > Parigi </OPTION>
  <OPTION value= " Londra " SELECTED > Londra </OPTION>
</optgroup>
</SELECT>

I campi testuali per l'inserimento del testo

Text Box

L'attributo MAXLENGTH stabilisce il numero massimo di caratteri da inserire nel riquadro; altri attributi sono il NAME, per dare un nome ( non visualizzabile ) alla casella di testo ed il VALUE, per fissare un valore iniziale ( es.: qui il mio testo ):

I campi di testo possono essere anche di sola lettura, usando l'attributo READONLY. Ad esempio:

O disabilitati:

Password Box

Servono per far inserire una password in maniera non visibile letteralmente, ma con i famosi * :

TextArea

Servono per far inserire un testo molto lungo, in genere che supera i 150 caratteri:

<TEXTAREA NAME = "testo" ROWS = "8" COLS = "40" >qui puoi scrivere il tuo testo</TEXTAREA>

ROWS indica il numero di righe della textarea, COLS il numero di caratteri (cioè di colonne) che ogni riga può contenere. Come si può vedere, se si vuol indicare del testo predefinito, in questo caso bisogna inserirlo fra l’apertura e la chiusura del tag.
Un altro attributo è il WRAP = " valore " : i suoi valori sono OFF, se si vogliono ignorare gli a capo, VIRTUAL, se voglio mostrarli ma non inviarli, PHYSICAL se voglio inserirli ed inviarli solo quando sono necessari.

Inviare un file o variabili nascoste ad un server

Vediamo ora come è possibile far inviare dall'utente, file dal proprio computer o come sia possibile inviare informazioni ad un url senza che l'utente possa vederle o scriverle in qualche campo del modulo di compilazione.

Hidden Field

Tale campo non è visibile all'utente, ma è utile al webmaster per lo sviluppo di applicazioni dinamiche per il web; come attributi ha i soliti NAME e VALUE.

Il Campo FILE

Questo modulo serve per inviare dei file via POST; il classico esempio è il campo per uplodare o selezionare dei files presenti sul computer dell'utente:

Image Button

Il campo "image" ci consente di utilizzare come bottoni del form delle vere e proprie immagini e assegnare loro un valore grazie a JavaScript; in questo caso non si tratta propriamente di un bottone ma la funzionalità è la medesima. Ecco il codice:

come si può vedere, se non si specifica nulla, l’immagine ha valore di submit. Gli attributi del campo immagine sono molto simili a quelli del tag < IMG >.

Ordinare un modulo con il tag Fieldset

Ordinare i moduli

Per la loro natura di "raccoglitori di informazioni", i moduli tendono a ingigantirsi e diventare lunghissimi. Per questo, con l’HTML 4 sono stati introdotti dei tag per fare un po’ d’ordine all’interno dei form.
Grazie al tag FIELDSET possiamo creare delle macro-aree all’interno dei form, e grazie al tag LEGEND, possiamo indicare il nome di ciascuna macro-area. Poniamo ad esempio di dover raccogliere i dati di un utente, raccogliendo dati anagrafici, residenza, domicilio e reperibilità sul lavoro. Possiamo farlo con la seguente sintassi:

<FIELDSET>
<LEGEND> Dati anagrafici </LEGEND>
</FIELDSET>
<FIELDSET>
<LEGEND> Residenza </LEGEND>
</FIELDSET>

Dati anagrafici

Residenza

Un esempio di uso in un modulo potrebbe essere il seguente:

Dati anagrafici Anno di nascita:

che si ottiene inserendo tale riga nel FIELDSET sotto il Tag LABEL:

<LABEL> Anno di nascita: <INPUT type = "text"> </LABEL>

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:

Vedi il codice. Come si può vedere, digitando il tasto tab, l’ordine di passaggio da un campo all’altro è quello indicato nel valore di TABINDEX. Vedendo il codice, si può notare come la funzione degli spazi sia quella di aumentare la dimensione del riquadro esterno.

Scriptingweb.com - the code solution

Risorse, approfondimenti, supporto, analisi scripts