|
|
|
|
|
|
FormFino ad ora abbiamo visto come è possibile utilizzare i vari Tag HTML per descrivere l'aspetto di una pagina, però fin qui ci siamo limitati al senso unidirezionale del Web; per rendere bidirezionale, quindi interattiva, una pagina web si usano le Form, che servono per raccogliere dati che poi verranno elaborati da programmi (CGI) residenti sul server oppure da script inseriti nell'HTML. Le Form vengono spesso anche utilizzate come modulo da compilare che poi verrà spedito ad un indirizzo email, questo richiede sempre un CGI o uno script che invii i dati ad un dato indirizzo di posta elettronica. Ci sono molti siti in internet che offrono CGI e script gratuiti quindi se si ha bisogno di attuare qualcosa di specifico, come la lettura/scrittura di un database, l'invio di dati ad un indirizzo email, ecc, basta fare delle ricerche e molto probabilmente si troveranno esempi e tutorial completi di quel che si vuole attuare.
Il Tag "<form>"Nel codice HTML le form sono delimitate dai Tag "<form>...</form>", fra questi due Tag ne vengono inseriti altri che specificano diversi tipi tipologie di immissione dati, opzioni, valori, ecc. Ad ogni Form va sempre associata un'azione, cioè i dati specificati ed immessi dall'utente vengono inviati ad un CGI o ad uno script che li elabora e fa il lavoro e le procedure per cui è stato creato; la sintassi è questa:
La proprietà "action" indica al browser la posizione dello script che deve analizzare e processare i dati. E' possibile anche fare degli esperimenti con la Form immettendo la seguente stringa nel valore di "action", cioe': "mailto:tuoindirizzo@email.it", immettendo il tuo indirizzo email, ogni volta che si invierà la Form tramite l'apposito pulsante, i dati verranno inviati nella propria casella di posta elettronica, ma saranno pressochè illeggibili in quanto codificati, però risulta un buon metodo per fare degli esperimenti. La proprietà "method" indica in che formato i dati devono essere inviati allo script, se si utilizza "get" il limite massimo di caratteri contenuti nella form è di 255, se si utilizza "post" i dati vengono inviati come un flusso direttamente al CGI quindi non c'è limite nella lunghezza dei dati.
Il Tag "<input>"Questo Tag ha molteplici sfaccettature che permettono di utilizzarlo in molte maniere, specificando il tipo con "type", il nome con "name" e il valore con "value", ma vediamo alcuni esempi pratici:
Per inserimento di testi:
Il risultato è:
Come tipo, cioe' "type", è stato specificato "text" e questo ha reso il tipo di input una casella di inserimento testo, come nome, cioe' "name", è stato specificato "cognome", quando i dati verranno inviati di conseguenza al CGI questi conterranno una variabile che si chiama "cognome" e che avrà come valore il testo che l'utente avra' inserito.
Opzioni con scelte multiple:
Il risultato è: Colore Blu
Il tipo di input "checkbox" permette di dare all'utente una serie di opzioni a selezione multipla, cioe' alla stessa variabile "colore" verrà assegnato un valore oppure più valori, come in un array.
Opzioni con scelta singola:
Il risultato è: Colore Blu
Contrariamente al tipo "checkbox", il tipo "radio" permette di dare una sola opzione possibile alla variabile "colore", infatti se si prova a selezionare un differente colore si noterà che il precedente selezionato si deseleziona automaticamente e all'invio della form, la variabile colore, avrà un solo valore.
Inserimento di password:
Il risultato è:
Usando il tipo "password" se si prova a inserire del testo nella casella si noterà che questo è mascherato.
Pulsante di invio della Form:
Il risultato è:
Specificando il tipo "submit" il Tag si e' trasformato in un pulsante, che indica come scritta il testo che è specificato nella proprietà "value", e si utilizza alla fine della Form quando l'utente ha compilato tutto il resto delle caselle ed opzioni e vuole inviare tutti i dati al CGI, infatti premendo il pulsante tutti i dati immessi vengono raccolti, codificati e inviati al programma che li analizza e fa le procedure per cui è stato creato.
Per resettare la Form:
Il risultato è:
Il tipo "reset" di solito si affianca al tipo "submit", infatti "reset" serve per pulire la Form da tutti i dati immessi e ripristinare le condizioni iniziali.
Utilizzare un'immagine al posto di un pulsante.
Il risultato è:
Funziona esattamente come il tipo "submit" solo che e' possibile sostituire il pulsante con un'immagine.
Il Tag "<textarea>"Con il Tag "<textarea>...</textarea>" è possibile utilizzare in una Form un'area di testo dove l'utente può inserire un testo lungo, per esempio per scrivere il testo di un messaggio, un curriculum, ecc. E' possibile utilizzare quest'area di testo anche al di fuori di una Form, per esempio per visualizzare un lungo testo in un'area ristretta senza inserire il testo medesimo in una lunga pagina. Con il codice:
si ottiene:
Dove l'utente può inserire un testo, se si vuole già inserire un testo nell'area di testo è sufficiente inserirlo nella posizione fra i due Tag "<textarea>...</textarea>". Per specificare la larghezza e l'altezza dell'area di testo è sufficiente cambiare i valori di "rows" e "cols", rispettivamente per l'altezza e la larghezza.
Menù a tendinaE' possibile creare un menù a tendina con varie scelte, praticamente il concetto è lo stesso dell'input type radio o checkbox ma il menù a tendina permette di raggruppare in un piccolo spazio molte scelte, anche decine e decine. La sintassi è questa:
Il risultato è:
Se si vuole espandere il menù in modo che non sia a tendina, ma sia a scorrimento, bisogna specificarne l'altezza tramite "size", in questo modo:
Il risultato sarà:
Se si vuole inoltre dare all'utente la possibilità di scegliere più di una voce nell'elenco, basta aggiungere la parola "multiple", in questo modo:
E si avrà:
Sarà possibile scegliere più di una voce cliccando e tenendo premuto il tasto Control.
Esempio pratico di una Form completaPer completare questa sezione scriviamo una Form completa con tutti gli elementi spiegati:
Si ottiene:
|
Powered by PM Digital Studio P.Iva 01467900435 |
