I Moduli o Form permettono di interagire con i visitatori del proprio sito offrendo loro la possibilità di immettere, o richiedere, informazioni tramite semplici caselle di testo, in alcuni casi menù a scorrimento, radiocomandi, caselle di tipo "spunta" ed altro ancora. Utilissimi, per non dire indispensabili, nella raccolta di dati sotto forma di questionari.
Il modulo per funzionare al meglio ha bisogno di un'ulteriore elaborazione da parte di un linguaggio di programmazione, il solo HTML infatti si limita ad inviare il tutto in modo spartano richiamando il programma di posta elettronica (client) installato sul PC dell'utente: Outlook express o Thunderbird, tanto per citare due dei più famosi e gratuiti client di posta.
Non tutti però hanno la possibilità di usare il proprio client, o almeno non sempre. Immaginiamo infatti chi si collega dall'ufficio, da casa di un amico o da un internet point dove non è possibile adoperare il proprio programma installato sul proprio PC.
Per questo ed altri motivi conviene, laddove sia fattibile, affidarsi ad uno script installato e configurato nel proprio spazio web. Uno dei più famosi è il FormMail di Andrea Matta, reperibile gratuitamente da questo link. In Alternativa ci si può affidare ad uno dei linguaggi lato server: PHP o ASP oppure ad uno dei servizi di sendmail che di solito lo stesso fornitore di spazio web offre ai propri clienti.
Qualcuno si starà chiedendo perchè mai sia tutto così complicato, perchè lo spam, spazzatura, che ogni giorno raggiunge milioni di utenti è talmente frequente e fastidioso che tutti i vari server free che offrivano un sendmail gratuitamente hanno limitato questo servizio ai soli clienti.
In ogni caso, che si decida di usare il proprio client di posta, un linguaggio lato server o un servizio già pronto, quanto descritto sotto a proposito dei moduli resta valido sempre.
<FORM>...</FORM>
L'elemento <form> serve per delimitare un modulo di input per l'inserimento dati. In un documento html possono esserci più moduli ma questi dovranno essere tutti indipendenti fra di loro, nel senso che il tag <form> non può essere annidato (un modulo all'interno di un altro modulo) come per le tabelle o per altri tags di html. L'elemento form necessita di alcuni attributi per funzionare:action, method ed enctype
action
L'attributo action è un URL che specifica la locazione a cui vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati del modulo debbano essere inviati dal client di posta di chi lo compila. Se manca l'attributo action viene assunto per default lo stesso URL in cui si trova il modulo.
method
L'attributo method specifica il metodo per accedere all'URL dichiarato in action due le possibilità: post o get. Il metodo get viene preferito per quei moduli che non necessitano di elaborazioni esterne. Per tutti gli altri casi si adopera post
enctype
L'attributo enctype specifica il tipo di media utilizzato per codificare i dati del modulo, per default è di tipo MINE.
Un esempio tipo potrebbe essere questo:
|
<form method="get" action="/cgi-bin/usermail.pl" enctype="text/plain" name="mio_form">
|
<INPUT>
L'elemento <input> rappresenta il campo più importante di un modulo. Questo campo, sul quale i dati possono essere introdotti o modificati dall'utente, ha diversi attributi e fra questi vi è type dal quale dipende il tipo di controllo che input riesce ad esercitare sul modulo.
ALIGN
Questo attributo specifica l'allineamento dell'immagine, quindi adoperato con l'impostazione TYPE=IMAGE.
CHECKED
Attributo che indica la selezione della casella o del pulsante di controllo, quindi adoperato con TYPE=CHECKBOX o TYPE=RADIO.
MAXLENGTH
Attributo che indica il numero massimo di caratteri che possono essere immessi nel campo testo, quindi adoperato con TYPE=TXT. Il numero potrebbe essere anche più grande di quello specificato dall'attributo SIZE, in questo caso il testo scorrerà orizzontalmente, essendo il numero di default illimitato.
NAME
Attributo che indica un nome univoco per il campo o per un gruppo di file correlati.
SIZE
Attributo che specifica le dimensioni del campo in numero di caratteri.
SRC
Attributo che indica l'URL a cui fare riferimento per l'immagine desiderata, da utilizzare con TYPE=IMAGE.
VALUE
Attributo che se utilizzato con gli attributi TYPE=... imposta il valore di visualizzazione iniziale di un campo, sia esso testo che numerico.
TYPE
Attributo che definisce il tipo di controllo da assegnare al campo input, per default è text: libero testo; possono essere definiti diversi tipi quali:
BUTTON
Utilizzato per incorporare pulsanti. L'attributo NAME è utilizzato per assegnare al pulsante un nome univoco. L'attributo VALUE specifica il testo da visualizzare sul pulsante stesso.
CHECKBOX
Utilizzato per semplici attributi booleani, dove un campo può essere vero o falso , si o no.
FILE
Con l'attributo File è possibile inviare un file contenuto nel proprio PC, ovviamente il server che lo riceve deve essere configurato per la scrittura sul disco.
HIDDEN
Con questo tipo di input non viene mostrato alcun campo a video, ma il contenuto del campo viene comunque spedito con il modulo.
IMAGE
E' un campo di immagine su cui poter cliccare, è necessario l'attributo NAME e l'immagine è specificata dall'attributo SRC, proprio come avviene per l'elemento <IMAGE>.
PASSWORD
Con l'attributo password è possibile inserire del testo in un campo senza che questo venga visualizzato, si vedranno una serie di asterischi.
RADIO
Utilizzato per un valore singolo su campi con diverse alternative. Se infatti allo stesso gruppo viene assegnato lo stesso nome, un solo valore potrà essere selezionato. E' possibile con CHECKED stabilire anche una scelta iniziale, sono obbligatori gli attributi NAME e VALUE.
Si noti come sia possibile selezionare una sola delle tre voci e come la prima sia già selezionata per default.
RESET
E' un pulsante che riporta il modulo ai valori iniziali, cioè vuoto, anche in questo caso l'attributo VALUE serve per il nome da visualizzare sul pulsante.
SUBMIT
E' un pulsante che serve per inviare il modulo riempito, anche in questo caso l'attributo VALUE serve per il nome da visualizzare sul pulsante.
TEXT
Utilizzato per i campi di testo a riga singola, si devono utilizzare gli attributi SIZE e MAXLENGTH per impostare la quantità massima di testo ammesso. Sono necessari gli attributi VALUE e NAME rispettivamente per assegnare un valore iniziale e per definire il nome univoco.
<OPTION>
L'elemento <OPTION> è utilizzato soltanto con l'elemento SELECT, rappresenta una scelta fra diversi valori. Ha due possibili attributi: SELECTED per indicare l'opzione inizialmente selezionata e VALUE per indicarne il valore rappresentato.
<SELECT>...</SELECT>
L'elemento <SELECT> consente di effettuare delle scelte rappresentate dall'elemento OPTION . Ha tre possibili attributi: MULTIPLE per effettuare diverse selezioni, NAME il nome che sarà inviato come coppia nome/valore, SIZE specifica il numero di voci visibili. Provate a selezionare le voci tenendo premuto il tasto CTRL o SHIFT come avviene normalmente per selezionare i files nel vostro sistema operativo.
<TEXTAREA>...</TEXTAREA>
L'elemento <textarea> consente di immettere testo su più righe. Gli attributi ROWS e COLS specificano le dimensioni visibili del campo in caratteri. Provate ad introdurre del testo:
<form ...>
<textarea cols"20" rows="5"></textarea>
</form>
|
|
Un esempio chiarirà meglio. Il Form riportato sotto serve per raccogliere dati e pareri. I dati vengono elaborati da uno script CGI che li controlla, li riordina ed infine li spedisce via e-mail all'indirizzo configurato nel form stesso. Attenzione!!! in questo esempio non succederà nulla perchè ho volutamente tolto i riferimenti al mio FormMail dal momento che vi sono stati abusi, è dunque solo dimostrativo ma sarebbe perfettamente funzionante nel caso in cui voi cambiaste i dati di riferimento.
Questo il codice HTML per ottenerlo:
<form name="parere" action="mailto:vostronome@serverdiposta.it" method="post"enctype="text/plain">
<table border="0" cellspacing="5" cellpadding="5">
<tr>
<td>Nome:</td><td><input type="text" name="nome" size="35" maxlength="40" value=""></td>
</tr><tr>
<td>E-mail:</td><td><input type="text" name="email" size="35" maxlength="40" value=""></td>
</tr><tr>
<td valign="middle">Inserisci<br>qui di lato <br>il tuo commento</td>
<td><textarea name="commento" rows="4" cols="30"></textarea></td></tr>
<tr><td>Come sei arrivato su Web-Link:<br>Se altro specificare:</td><td>
<select name="come sei arrivato">
<option selected>motore di ricerca</option>
<option>banner</option>
<option>link su altro sito</option>
<option>guestbook</option>
<option>news group</option>
<option>casualmente</option>
<option>(altro)</option>
</select>
<br>
<input type=text name="come" size="35" maxlength="40" value="">
</td>
</tr><tr>
<td>Se vuoi.....<br>puoi dirmi <br>come giudichi<br> questa guida:
</td><td><hr width="50%" align="left">
<input type=radio name="giudizio" value="pessimo"> Pessima<br>
<input type=radio name="giudizio" value="mediocre"> Mediocre<br>
<input type=radio name="giudizio" value="sufficiente"> Sufficiente<br>
<input type=radio name="giudizio" value="buono"> Buona<br>
<input type=radio name="giudizio" value="ottimo"> Ottima<br>
<input type=radio name="giudizio" value="non saprei"> Non
saprei <hr width="50%" align="left"></td></tr>
<tr><td>Sempre se vuoi....<br>puoi dirmi<br>la tua Età?
</td><td><hr width="50%" align="left">
<input type=radio name="eta" value="0-15"> 0-15<br>
<input type=radio name="eta" value="16-25"> 16-25<br>
<input type=radio name="eta" value="26-35"> 26-35<br>
<input type=radio name="eta" value="36-45"> 36-45<br>
<input type=radio name="eta" value="46-55"> 46-55<br>
<input type=radio name="eta" value="55+"> 55+<br><hr
width="50%" align="left"></td></tr>
<tr><td></td><td><input type=submit value="Invia
i Dati"><input type=reset value="Annulla"></td></tr>
</table>
</form>
|
Da notare nella prima riga di codice vostronome@serverdiposta.it dovrà essere sostituito dal vostro indirizzo di posta, oppure per chi ha un Formail o Sendmail installato dovrà fare riferimento a quello ed ai suoi parametri di configurazione.
|
Consiglio Con l'uso dei CSS è possibile cambiare i colori, il font e molto altro ancora dei vari elementi che compongono un modulo.
|
Home ·
Primi Passi ·
PP Style ·
Guida HTML ·
Guida CSS ·
XHTML con Style ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
