 |
 |
Le FORM sono un modello per estendere l'architettura client-server del protocollo HTTP. Si tratta di applicazioni che permettono di rendere interattivi i documenti HTML dando la possibilità, tramite l'invio di dati, di far svolgere dei compiti al server remoto e ricevere da questo i risultati richiesti.
|
 |
Il loro utilizzo è indispensabile per:
|
|
 |
Una FORM è definita con il tag <FORM> e terminata con il suo end-tag </FORM>. Tutto ciò che è compreso tra questi due tags delimita l'area destinata a raccogliere i dati inviati, ed opportunamente gestiti come vedremo, dal client al server remoto.
Dentro la FORM può essere definito qualsiasi altro tag HTML fuorchè una nuova FORM, ossia non si possono avere FORMs annidate, però ogni documento HTML può contenere una o più FORMs. In quest'ultimo caso però sarà inviata una sola FORM alla volta al server remoto per la relativa elaborazione.
Il tag FORM è descritto attraverso i seguenti attributi:
|
|
 |
ACTION: Specifica l'azione da eseguire per l'invio di una FORM, cioè specifica un URL che punta ad un programma CGI, ossia un particolare programma, residente sul server, che riceve come input i dati inviati con la FORM, gli elabora ed, eventualmente, restituisce un risultato. Tale risultato può essere ad esempio una pagina HTML creata dinamicamente da inviare al client per la sua visualizzazione, può essere un dato passato al server per essere memorizzato in un database …
Un esempio dell'attributo ACTION può essere il seguente:
Action="http://telemat.det.unifi.it/cgi-bin/esempio"
E' possibile indicare nella ACTION anche altri tipi di URL, ad esempio un indirizzo e-mail. In questo caso la FORM viene spedita nel body di un messaggio di posta e l'attributo ACTION sarà:
Action="mailto:abc@telemat.det.unifi.it"
|
|
 |
METHOD: L'attributo METHOD indica il metodo HTTP con il quale vengono inviati i dati al programma CGI. I dati impostati dal client nei campi della FORM vengono passati al programma memorizzati in variabili con associazioni variabile=valore. I due metodi più usati per l'invio dei dati sono GET e POST ma ce ne sono altri tra i quali citiamo put, head, delete …
Il metodo GET viene usato di solito per effettuare delle operazioni di lettura di un database residente sul server remoto. Con questo metodo le variabili, ognuna delle quali è distinta dalle altre da un nome, vengono appese alla URL contenuta nella ACTION con i loro relativi valori separate dalla URL dal carattere "?". Ad esempio:
GET http://telemat.det.unifi.it/cgi-bin/esempio?variabile=valore
Alcuni server hanno delle limitazioni sulle URL a 256 caratteri, quindi è sconsigliato l'utilizzo del metodo GET quando ci sono da inviare molte variabili contenenti parecchi dati, in quanto si rischia di perdere una parte dell'informazione inviata.
Il metodo POST è invece più utilizzato per la modifica di un database (in generale modifica, creazione, aggiunta, cancellazione). Qui i dati al server remoto sono passati all'interno del request body e la URL non avrà appendici come nel caso precedente ma sarà semplicemente ciò che c'è scritto nella ACTION.
Però niente vieta di utilizzare il metodo GET per la scrittura su un database ed il POST per la lettura. Benchè i due metodi si differenzino tra loro nel modo di inviare i dati al server remoto, sostanzialmente fanno la stessa cosa.
|
|
 |
ENCTYPE: Specifica il tipo di codifica del contenuto della FORM, che può essere:
ACCEPT – CHARSET: Specifica il tipo di codifica dei caratteri della FORM ed è impostato dal server ed interpretato dal client. Questo significa che il server vuole che la FORM gli sia rispedita con un particolare charset da lui stabilito. Così, che la macchina client sia Unix, Windows o MacOS, i dati da lui scritti nella FORM verranno codificati in un charset stabilito dal server remoto affinchè si evitino errori nelle letture di caratteri strani come le lettere accentate, che non fanno parte della codifica ASCII standard.
ACCEPT: Specifica il tipo o i tipi di file che il server remoto può accettare. Se ad esempio il server invia una FORM dove richiede un'immagine, questo accetterà in risposta solamente file di tipo immagine (jpg, gif……) perchè così ha stabilito tramite l'attributo ACCEPT.
|
|
 |
I dati richiesti all'utente sono specificati all'interno della FORM tramite elementi detti controls, che possono essere del tipo:
|
|
 |
Il control INPUT può essere di diversi tipi, specificati dall'attributo TYPE, il quale può assumere uno tra i seguenti valori:
TEXT: crea un'area ipertestuale in cui l'utente può inserire una singola linea di testo. I dati immessi vengono associati ad una variabile specificata dall'attributo NAME. Per default, quando in un campo di input manca l'attributo TYPE, viene automaticamente selezionato un TEXT.
PASSWORD: è uguale al tipo TEXT con la sola differenza che nella linea dove inseriamo la password, per ogni carattere digitato compare il carattere asterisco " * " per conservare la dovuta riservatezza nel caso la password venga digitata in un luogo pubblico. Da notare che la password, come gli altri dati della FORM, viene trasmessa non criptata e quindi visibile a tutti.
CHECKBOX: crea una casella la cui selezione da parte dell'utente dà origine nei dati trasmessi ad una assegnazione name=value. Sono ammessi più CHECKBOX tramite i quali possiamo effettuare una scelta multipla, ossia possiamo selezionare più opzioni tra tutte quelle presentate.
RADIO: è uguale al CHECKBOX con la sola differenza che, in questo caso, le opzioni sono mutuamente esclusive, ossia selezionandone una automaticamente ne deselezioniamo un'altra. Quindi abbiamo un'unica assegnazione name=value.
SUBMIT: crea un pulsante premendo il quale si esegue la ACTION inviando tutti i dati presenti nei campi della FORM al server secondo il METHOD preimpostato. Tale pulsante può anche essere etichettato assegnando una stringa all'attributo VALUE. Inoltre se viene definito un NAME si invia pure l'assegnazione name=value.
RESET: crea un pulsante premendo il quale si cancellano tutti i dati impostati dall'utente nei campi della FORM riportandoli ad i loro valori di default. E' l'unico TYPE ad effetto locale.
FILE: è un campo che serve per l'invio di un file al server remoto.
HIDDEN: è un tipo di input box nascosto all'utente che il client non può modificare. Il valore imposto ad un campo HIDDEN può costituire l'informazione di stato per il server; ad esempio se ho una serie di FORMs concatenate da inviare in successione il server, tramite il contenuto del campo HIDDEN, riconosce l'esatta sequenza delle FORMs così da poterle elaborare in maniera corretta.
IMAGE: con questo TYPE si crea un'immagine cliccando sulla quale si invia al server la coordinata X,Y del punto in cui si trovava il mouse al momento del click.
BUTTON: si tratta di un bottone user-defined.
|
|
 |
Gli altri attributi del campo INPUT sono:
VALUE: per un type TEXT è il valore di default che viene mostrato. Per i type CHECKBOX e RADIO è il valore inviato al server se la casella corrispondente viene selezionata dall'utente.
CHECKED: imposta la selezione di default per le caselle dei type CHECKBOX e RADIO.
NAME: nome della variabile che contiene il dato che sarà inviato al server remoto. Naturalmente le variabili presenti nella FORM devono avere nomi diversi.
SIZE: stabilisce la lunghezza in caratteri di visualizzazione in un campo. Da notare che SIZE può imporre la lunghezza della linea in cui inserire il testo ma non impone il massimo numero di caratteri che si possono introdurre nella linea. Tale linea sarà a scorrimento orizzontale e si potranno visualizzare contemporaneamente solamente un numero di caratteri impostato col SIZE.
MAXLENGTH: questo stabilisce il massimo numero di caratteri che si possono inserire in un campo.
|
|
 |
Nell'esempio sopra riportato di HTML-FORM con il relativo output visualizzato dal browser, si può notare come ogni TYPE di INPUT ha una variabile associata, ciascuna di nome differente dalle altre, che verrà poi elaborata dal programma residente sul server.
Nel caso del TYPE RADIO abbiamo due nomi uguali. Non si tratta di una eccezione alla regola, ma proprio per il fatto che selezionando una casella automaticamente si deseleziona l'altra, al server verrà passata una sola variabile. Questo significa che selezionando maschio, nei dati inviati troverò scritto sex=male come associazione nome=valore.
Il VALUE nel type SUBMIT è presente non solo perchè il suo valore me lo ritrovo scritto sul bottone, ma anche perchè avrei potuto definire più SUBMIT con valori diversi anche se di scarsa utilità.
|
|
 |
Il control SELECT specifica una selezione tramite menù di opzioni. Tali scelte possono essere mutuamente esclusive o meno.
Gli attributi per il campo SELECT sono:
MULTIPLE: Se compare questo attributo la scelta è multiopzione, altrimenti abbiamo scelte mutuamente esclusive.
SIZE: Specifica la dimensione di visualizzazione della lista sul browser. Quindi non impone il numero di linee della lista ma ne impone il numero di linee visibili contemporaneamente sul browser.
NAME: E' il nome della variabile lista.
|
|
 |
Ogni linea della lista è individuata dal tag <OPTION>. Gli attributi definibili per questo tag sono:
VALUE: Rappresenta il valore assunto dalla variabile nel caso quel componente della lista sia selezionato.
SELECTED: Specifica la selezione di default che può essere unica o multipla.
Tra il tag <OPTION> ed il suo end-tag </OPTION> dovremo inserire una stringa di caratteri che sarà ciò che il browser scriverà nella corrispondente linea della lista. Nel caso di multiple selection il name inviato al server remoto può contenere più valori.
|
|
 |
Qui sopra è riportato un esempio di HTML-FORM con il campo SELECT ed il relativo output del browser.
|
|
 |
L'ultimo tag è il <TEXTAREA> tramite il quale possiamo inserire un testo multilinee. Gli attributi definibili sono:
ROWS: Indica il numero di linee visibili della TEXTAREA.
COLS: Indica il numero di colonne visibili della TEXTAREA.
Naturalmente la dimensione visibile della TEXTAREA sarà rows x cols, ma questa non è una limitazione al numero di caratteri che posso immettervi.
|
|
 |
Questo è un esempio di codice HTML che specifica una FORM con una TEXTAREA e relativo output. Da notare che è possibile inserire una o più linee di caratteri nella TEXTAREA per default semplicemente specificandoli tra i tag <TEXTAREA> e </TEXTAREA>.
|
|
 |
|
|
 |
Questo è un esempio di quanto descritto sopra. Nel caso l'utente non riempia i campi di testo (e quindi non assegni nessun valore ai name associati) nel vettore saranno comunque presenti i nomi delle variabili seguiti dal carattere "=" ma il prossimo carattere sarà "&" nel caso di più variabili, perchè il campo era vuoto e quindi non passiamo niente al server. Invece per le caselle non selezionate nei campi CHECKBOX il vettore dei dati sarà privo oltre che del value anche del name.
|
|
 |
ACTION?name1=value1&name2=value2&name3=value.....
Quindi la URL è formata dal contenuto dell'attributo ACTION alla quale vengono aggiunti il carattere "?" e subito dopo il vettore di dati descritto sopra. Da qui si capisce che i dati della FORM vengono inviati direttamente con la URL al server remoto che passa il contenuto della FORM al programma CGI su un comando di linea di una shell del sistema operativo.
|
|
 |
|
 |
In questo slide è possibile osservare gli esempi di request con i metodi di GET e POST.
Ultimo aggiornamento: 27 Luglio 2000