Moduli (forms)

Vedremo di seguito come dotare i documenti HTML di possibilitá di interazione verso l'utente mediante l'iserzione di apposite aree di inserimento testo, menú di selezione eccetera che consentono all'utente di inserire informazioni che potremo in seguito farci inviare.

Il tag che sovrintende alla gestione di questi moduli (forms) di inserimento dati é <form> chiuso dal suo corrispettivo </form>.

Al suo interno, potremo inserire uno o piú tag <input> che opportunamente parametrizzati ci consentono di gestire strumenti di input quali aree di testo, radio button, password, check box, pulsanti di azione.

Vediamo ora i vari parametri dei diversi tags.

<form></form>
I parametri supportati sono tre e cioé action, method ed enctype; vediamoli in dettaglio.

action

con action="......" si definisce l'URL che elaborerá il contenuto del form, essa puó essere la chiamata a un programma residente sul server che, mediante il protocollo CGI riceverá i dati del form e li elaborerá secondo quanto previsto dal programma stesso oppure un semplice mailto:tizio@server.com che provvedrá ad inviare mediante posta elettronica i dati del form al'indirizzo specificato (nota: mailto non &eeacute; supportato dalle versioni piú vecchie dei browser, quindi, per compatibilitá assoluta occorrerebbe ricorrere ad apposito programma CGI anche per il solo invio via posta dei dati del form)

method

questo parametro definisce il modo con cui il contenuto del modulo verrá passato al programma che deve elaborarlo.
Con method="post" i dati verranno passati mediante lo standard input; con method="get" i dati verranno inviati al server accodati alla URL del programma che deve elaborarli che li assegnerá a una variabile ambiente dalla quale il programma di elaborazione li recupererá.
Il metodo GET é stato il primo metodo utilizzato ed é supportato da tutti i server per contro, puó dare problemi di affidabilitá e soffre del fatto che, essendo il passaggio di informazioni realizzato tramite variabili d'ambiente, la lunghezza delle stesse non puó superare i limiti imposti alle variabili d'ambiente dal server su cui gira l'applicazione incaricata dell'elaborazione dei dati.
Il metodo POST &eeacute; piú recente, piú sicuro e non ha limitazioni relative alla lunghezza dei dati gestibili in quanto lo stream di standard input puó avere qualunque lunghezza.

enctype

questo parametro definisce il metodo di codifica dei dati solo se il metodo di trasferimento dei dati é stato impostato su POST.
Normalmente questo attributo non é necessario, solo nel caso si utilizzi come action il giá visto mailto:...... puó essere utile provare come valori di enctype quanto segue:
enctype="application/x-www-form-urlencoded"
oppure
enctype="text/plain"
da scegliere in funzione del client di posta utilizzato.

<input type>
Questo tag, che con i suoi vari attributi puó gestire campi di testo, liste, menú non richiede il corrispettivo tag di chiusura.
Esaminiamo ora i vari attributi disponibili per input type di input:

text

con input type="text" il browser visualizzerá una casella per l'input di testo; questa cesella ha per prima cosa bisogno di un nome che la identifiche a fronte del programma che dovrá elaborare il contenuto del form; a questo si provvede con il parametro name, avremo quindi:
<input type="text" name="pippo">
la stessa casella, puó inizializzata con un valore di default con il parametro value, avremo quindi:
<input type="text" name="pippo" value="bla bla">
il browser, visualizzerá una casella lunga 20 caratteri; é comunque possibile modificare questa lunghezza mediante il parametro size, avremo quindi:
<input type="text" name="pippo" value="bla bla" size="30">
puó essere fissata la lunghezza massima con il parametro maxlenght, avremo quindi:
<input type="text" name="pippo" value="bla bla" size="30" maxlenght="28">

password

con input type="password" il browser visualizzerá una casella di testo il cui input verrá visualizzato durante l'inserimento come una serie di asterischi, tutti gli altri parametri visti per text valgono anche per questo parametro.

radio, checkbox

con input type="radio" il browser visualizzerá una serie di radio button (uno per ogni tag input type="radio") di cui solo uno puó essere selezionato, mentre con input type="checkbox" viene visualizzata una serie di caselle (una per ogni tag input type="checkbox") di cui é possibile selezionarne piú di uno.
Per ognuno di questi tag di input é indispensabile specificare un parametro di value che verrá passato al programma di elaborazione.
L'ulteriore parametro checked permette di preselezionare uno (radio) o piú (checkbox) caselle; avremo quindi ad esempio:
<input type="radio" name="pippo" value="val 1" checked>
<input type="radio" name="pippo" value="val 2">

<input type="checkbox" name="pippo" value="ok">
<input type="checkbox" name="pluto" value="ok">

Attenzione !

Per un corretto passaggio dei parametri, nel caso di piú tag di input di tipo radio presenti nello stesso form essi possono avere lo stesso nome ma valori diversi, nel caso invece di piú tag di input di tipo checkbox presenti nello stesso form essi devono avere nomi diversi e lo stesso valore

Per entrambi, il testo che segue il segno di maggiore relativo alla chiusura del tag verrá utilizzato come etichetta.

hidden

Questo tipo di input in realtá non visualizza nulla a video ma mediante l'impostazione di opportuni valori per name e value possono essere ritornate al programma di elaborazione informazioni riguardanti, ad esempio, il punto da cui &eeacute; stato richiamato il form.

reset

Questo parametro, visualizza un pulsante che, se attivato, riporta tutti i campi del form ai valori di default.

submit

Questo parametro, visualizza un pulsante che, se attivato, invia i dati contenuti nel form al server per l'elaborazione

Per questi ultimi due parametri del tag input type= possono essere impostati valori personalizzati per le etichette mediante il parametro value, allo stesso modo, al posto dei pulsanti di default possono essere visualizzate delle immagini mediante il parametro src che viene ad assumere la stessa funzione e sintassi di img src=.....

<select></select>
Questo tag, gestisce le liste pull-down e anche per esso, occorre definire un nome con il consueto parametro name="......".
Gli elementi della lista, sono gestite dal tag <option> che non richiede tag di chiusura e utilizza il testo che lo segue come elemento della lista, per ognuno di essi, occorre definire un value che verrá passato al programma di elaborazione; nel caso, si voglia impostare un valore preselezionato, utilizzare nell'ambito del tag option interessato il parametro selected.
Vediamo ora un piccolo esempio:
<select name="personaggi">
<option value="paperino">Paperino
<option value="topolino" selected>Topolino
<option value="pluto">Pluto
</select>

Nel caso si vogliano visualizzare piú elementi della lista contemporanemente (il default é 1) occorre specificare il parametro size per il tag select; ad esempio con size="4" vengono visualizzata una finestra che contiene 4 elementi della lista contemporaneamente.

<textarea></textarea>
Con questo tag, si gestiscone le finestre di input per testi lunghi.
Oltre al nome, da impostare sempre con name="....." é possibile impostare le dimensioni, in righe e colonne di questa finestra con i parametri rows=".." e cols=".." nell'ambito del tag textarea
Come ultimo parametro di textarea abbiamo wrap che serve a gestire la modalitá di wrapping all'interno della finestra.
Di default, wrap é off e cioé il testo verrá ritornato al programma di elaborazione cosí come inserito; nel caso si imposti wrap="virtual" il testo viene mandato a capo automaticamente nell'ambito della finestra ma restituito al programma di elaborazione come una sola lunga stringa, nel caso invece si imposti wrap="phisical" il testo verrá formattato come nel caso precedente e inviato al programma di elaborazione con questa formattazione.
Riassumendo, possiamo avere:
<textarea name="commento" rows="3" cols="30" wrap="virtual">
Eventuale testo di default
</textarea>

Per finire, ecco un esempio concreto di form che, se vorrete, potete compilare e inviarmi