Moduli o Form
I Moduli permettono all'utente di immettere informazioni tramite caselle di testo, menù a scorrimento, caselle di tipo "spunta". Molto utili, per non dire indispensabili, nella raccolta di dati sottoforma di questionario.
Il modulo per funzionare necessita di un'ulteriore elaborazione, di solito si inviano i dati ad uno script CGI che provvede a formattare gli stessi per poi compiere determinate azioni, la più comune è la spedizione alla propria casella postale. E' possibile farsi inviare il modulo anche senza che questo sia processato da uno script CGI ma il risultato è decisamente più scadente. Se vi interessa questo tipo di spedizione, vi rimando alla mia rubrica Primi Passi alla lezione sui form.
Sono diversi i siti che offrono un formmail in cambio di nulla, quasi tutti i server free hanno il proprio, provate a cercare anche il vostro cliccando sui servizi offerti dalla home page del vostro sito.
Questi due ne sono un esempio:
Formail di Tiscalinet.it
Formail di Freeweb.Supereva.it
A quel punto non resta che seguire le loro istruzioni...
Vediamo gli elementi e gli attributi che costituiscono un modulo :
<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 indipendenti uno dall'altro, nel senso che il tag <FORM> non può essere annidato (un modulo all'interno di un altro modulo). L'elemento Form ha bisogno di alcuni attributi quali:ACTION,METHOD e ENCTYPE
<FORM> | attributi assegnabili all'elemento FORM: | ACTION METHOD ENCTYPE
| </FORM> |
|
ACTION
L'attributo ACTION è un URL che specifica la locazione a cui vengono inviati i dati del modulo, può essere semplicemente un indirizzo di posta. Se manca l'attributo ACTION viene assunto per default l'URL stesso in cui si trova il modulo.
METHOD
L'attributo METHOD specifica il metodo per accedere all'URL dichiarato in ACTION e di solito si tratta dei metodi POST o GET. Il metodo GET viene preferito per quei moduli che non necessitano di elaborazioni esterne.
ENCTYPE
L'attributo ENCTYPE specifica il tipo di media utilizzato per codificare i dati del modulo, per default è il tipo MINE.
Un esempio tipo, potrebbe essere questo:
<FORM METHOD="GET" ACTION="/cgi-bin/usermail"> |
<INPUT>
L'elemento <INPUT> rappresenta un campo in cui i dati possono essere introdotti o modificati dall'utente; ha diversi attributi quali:
<INPUT> | attributi assegnabili all'elemento INPUT: | ALIGN CHECKED MAXLENGTH NAME SIZE SRC VALUE TYPE
|
|
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 dati accettati dal campo, per default è libero testo; possono essere definiti diversi tipi quali:
<TYPE> | tipi di campi assegnabili all'attributo TYPE: | BUTTON CHECKBOX HIDDEN IMAGE PASSWORD RADIO RESET SUBMIT TEXT TEXTAREA
|
|
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 contentuto 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.
TEXTAREA
Utilizzato per i campi di testo a righe multiple, si devono utilizzare gli attributi SIZE e MAXLENGTH per impostare la quantità massima di testo ammesso.
<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.
Discreto Buono Ottimo
<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.
Discreto Buono Ottimo
<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. Con l'attributo WRAP si torna automaticamente a capo una volta raggiunto il margine, diversamente il testo prosegue a scorrimento orizzontale. Provate ad introdurre del testo:
Un esempio Ancora una volta un esempio chiarirà forse meglio tutto quanto. Il FORM sotto se riempito dal mio sito mi invierà un tuo parere; il form viene elaborato da uno dei tanti script CGI per l'invio form prima di essermi recapitato tramite e-mail, unico campo obbligatorio quello con l'asterisco *. (in questa guida vale soltanto come esempio ma di fatto è funzionante soltanto la versione on line, e questo per ovvie ragioni di sicurezza contro lo spam)
Nome: | |
E-mail: * | |
Inserisci qui di lato il tuo commento | |
Come sei arrivato su WebLink: Se altro specificare: | seleziona --> Motore di ricerca Banner Link su altro sito Guestbook News Group Casualmente (Altro) |
Se vuoi..... puoi dirmi come giudichi questa guida: | Pessima Mediocre Sufficiente Buona Ottima Non saprei
|
Sempre se vuoi.... puoi dirmi la tua Età? | 0-15 16-25 26-35 36-45 46-55 55+
|
| |
Questo il codice per ottenerlo:
<FORM name="parere" ACTION="/cgi-bin/usermail" METHOD=get> <INPUT TYPE="hidden" NAME="_DEST" VALUE="tuamail@server.com"> <input type="hidden" name="_SUBJ" value="Guida Html">
Da notare che certi parametri sopra inseriti sono espressamente richiesti dallo script o dal server sul quale ci si appoggia per la spedizione.
<FORM name="parere" ACTION="/cgi-bin/usermail" METHOD=get> <INPUT TYPE="hidden" NAME="_DEST" VALUE="tuamail@server.com"> <input type="hidden" name="_SUBJ" value="tuo subject"> <table border=0 cellspacing=5 cellpadding=5> <tr> <td><font color="#660000">Nome:</font></td><td><input type=text name="nome" size=35 maxlength=40 value=""></td> </tr><tr> <td><font color="#660000">E-mail: *</font></td><td><input type=text name="email" size=35 maxlength=40 value=""></td> </tr><tr> <td valign=middle><font color="#660000">Inserisci<br>qui di lato <br>il tuo commento</font></td> <td><textarea name="commento" rows=4 cols=30></textarea></td></tr> <tr><td><font color="#660000">Come sei arrivato su WebLink:<br>Se altro specificare: </font></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><font color="#660000">Se vuoi.....<br>puoi dirmi <br>come giudichi<br> questa guida:</font> </td><td><hr width="50%" align="left"><font color="#006600"> <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 </font><hr width="50%" align="left"></td></tr> <tr><td><font color="#660000">Sempre se vuoi....<br>puoi dirmi<br>la tua Età?</font> </td><td><hr width="50%" align="left"><font color="#000066"> <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></font><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> |
|
Per indirizzare il form ad un server formail valido, fare riferimento alle istruzioni contenute nelle pagine del formmail stesso, quello del servizio che abbiamo deciso di adoperare, infatti queste cambiano a seconda dello script adoperato dallo stesso gestore.
Quasi tutti gli spazi web che vengono offerti gratuitamente hanno un servizio CGI di invio form (form-mail), si tratta semplicemente di leggere le istruzioni che il fornitore del servizio mette a disposizione su apposite pagine.