I Moduli o Forms
I Moduli o Forms 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 installato e configurato nel proprio PC un client di posta, o non sempre è possibile usarlo, immaginiamo per esempio 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 è FormMail di Andrea Matta, reperibile gratuitamente su 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 gratuito hanno sospeso questo servizio o lo hanno limitato 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 in rete, quanto descritto sotto a proposito dei moduli resta valido sempre.
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 installato e configurato nel proprio PC un client di posta, o non sempre è possibile usarlo, immaginiamo per esempio 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 è FormMail di Andrea Matta, reperibile gratuitamente su 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 gratuito hanno sospeso questo servizio o lo hanno limitato 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 in rete, quanto descritto sotto a proposito dei moduli resta valido sempre.
<form>...</form>
L'elemento <form> serve per creare un modulo 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 e necessita del suo elemento di chiusura </form>
L'elemento <form> serve per creare un modulo 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 e necessita del suo elemento di chiusura </form>
action
L'attributo action è l'azione da compiere nel momento dell'invio, di solito un URL che specifica la locazione del file o dello script al quale vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati debbano essere inviati tramite il 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.
L'attributo action è l'azione da compiere nel momento dell'invio, di solito un URL che specifica la locazione del file o dello script al quale vengono inviati i dati del modulo, può essere anche un indirizzo di posta elettronica nel caso in cui i dati debbano essere inviati tramite il 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
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.
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/Formail.pl" enctype="text/plain" >
<label>...</label>
L'elemento <label> è una etichetta per descrivere un campo input. Apparentemente sembra una semplice descrizione che potrebbe essere lasciata ad una qualsiasi scritta di un testo direttamente nel codice html, invece è qualcosa di più, facendo click su un input txt si ottiene il fuoco di quella casella, su un input radio si attiva la scelta proprio come se si fosse fatto click sul pallino. Questo elemento necessita del relativo elemento di chiusura </label>
L'elemento <label> è una etichetta per descrivere un campo input. Apparentemente sembra una semplice descrizione che potrebbe essere lasciata ad una qualsiasi scritta di un testo direttamente nel codice html, invece è qualcosa di più, facendo click su un input txt si ottiene il fuoco di quella casella, su un input radio si attiva la scelta proprio come se si fosse fatto click sul pallino. Questo elemento necessita del relativo elemento di chiusura </label>
<label for="nome"> Nome:</label><input id="nome" type="text">
<label for="maschio">Maschio : </label><input id="maschio" name="sesso" type="Radio">
<label for="femmina">Femmina : </label><input id="femmina" name="sesso" type="Radio">
<label for="maschio">Maschio : </label><input id="maschio" name="sesso" type="Radio">
<label for="femmina">Femmina : </label><input id="femmina" name="sesso" type="Radio">
Si crea una label e con l'attributo for si specifica per quale nome del campo viene creata, in questo esempio nome, maschio e femmina assegnati con i relativi id="xxx" ai vari campi input di tipo text e radio
Questo il risultato:
Questo il risultato:
<input>
L'elemento <input> rappresenta il campo più importante di un modulo. Questo campo consente all'utente di introdurre o modificare dati in diversi modi a seconda del tipo (type) di input adoperato. Oltre al tipo di dati ve ne sono molti altri ma qui vi descrivo soltanto quelli realmente adoperati.
L'elemento <input> rappresenta il campo più importante di un modulo. Questo campo consente all'utente di introdurre o modificare dati in diversi modi a seconda del tipo (type) di input adoperato. Oltre al tipo di dati ve ne sono molti altri ma qui vi descrivo soltanto quelli realmente adoperati.
<input attributo="valore">
attributi assegnabili all'elemento input:
align, checked, maxlength, name, size, src, type, value
Ce ne sono di nuovi introdotti da html5 e visibili sulla guida HTML 5 di Web-Link
align
Questo attributo specifica l'allineamento, quindi adoperato con l'impostazione type=image, i possibili valori sono: left, right, top, middle e bottom. Questo attributo è deprecato con html4.01 e non più supportato da html5 a favore di un allineamento con fogli di style.
Questo attributo specifica l'allineamento, quindi adoperato con l'impostazione type=image, i possibili valori sono: left, right, top, middle e bottom. Questo attributo è deprecato con html4.01 e non più supportato da html5 a favore di un allineamento con fogli di style.
checked
Questo attributo indica la casella preselezionata o il radio-button scelto come premuto, adoperato con type=checkbox e type=radio.
Questo attributo indica la casella preselezionata o il radio-button scelto come premuto, adoperato con type=checkbox e type=radio.
maxlength
Questo attributo indica il numero massimo di caratteri che possono essere immessi nel campo testo, adoperato con type=txt. il numero potrebbe essere anche più grande di quello specificato dall'attributo size, in quel caso il testo scorrerà orizzontalmente essendo il numero di default illimitato.
Questo attributo indica il numero massimo di caratteri che possono essere immessi nel campo testo, adoperato con type=txt. il numero potrebbe essere anche più grande di quello specificato dall'attributo size, in quel caso il testo scorrerà orizzontalmente essendo il numero di default illimitato.
name
Questo attributo assegna un nome univoco per il campo o per un gruppo di file correlati.
Questo attributo assegna un nome univoco per il campo o per un gruppo di file correlati.
size
Questo attributo specifica le dimensioni in numero di caratteri del campo inserimento dati.
Questo attributo specifica le dimensioni in numero di caratteri del campo inserimento dati.
src
Questo attributo indica l'URL da richiamare l'immagine grafica usata nel pulsante di submit, da utilizzare quindi solo con type=image.
Questo attributo indica l'URL da richiamare l'immagine grafica usata nel pulsante di submit, da utilizzare quindi solo con type=image.
value
Questo attributo imposta il valore iniziale di un campo, sia esso testo che numerico.
Questo attributo imposta il valore iniziale di un campo, sia esso testo che numerico.
type
Questo attributo definisce il tipo di controllo da assegnare al campo input, per default è text: libero testo; possono essere definiti diversi tipi di input quali:
Questo attributo definisce il tipo di controllo da assegnare al campo input, per default è text: libero testo; possono essere definiti diversi tipi di input quali:
<input type="...">
Tipi di campi assegnabili ad input con l'attributo type
button, checkbox, file, hidden, image, password, radio, reset, submit, text
Ce ne sono di nuovi introdotti da html5 e visibili sulla guida HTML 5 di Web-Link
button
Questo attributo di type viene utilizzato per inserire pulsanti. Con l'attributo value è possibile specificare il testo da visualizzare sul pulsante stesso.
Questo attributo di type viene utilizzato per inserire pulsanti. Con l'attributo value è possibile specificare il testo da visualizzare sul pulsante stesso.
<input type="button" value="premi" name="nome">
checkbox
Questo attributo di type viene utilizzato per caselle di scelta dove il suo valore è di tipo booleano, in pratica il campo può essere soltanto vero o falso, si o no.
Questo attributo di type viene utilizzato per caselle di scelta dove il suo valore è di tipo booleano, in pratica il campo può essere soltanto vero o falso, si o no.
<input type="Checkbox" value="si" name="nome">
file
Questo attributo di type viene utilizzato per inviare un file contenuto nel proprio PC, ovviamente il server che lo riceve deve essere configurato per poterlo archiviare sul disco, operazione che Html da solo non è in grado di fare quindi si ricorre a PHP o ASP o qualsiasi altro linguaggio lato server.
Questo attributo di type viene utilizzato per inviare un file contenuto nel proprio PC, ovviamente il server che lo riceve deve essere configurato per poterlo archiviare sul disco, operazione che Html da solo non è in grado di fare quindi si ricorre a PHP o ASP o qualsiasi altro linguaggio lato server.
<input type="File" name="nome">
hidden
Questo attributo di type viene utilizzato per campi nascosti. Non viene mostrato alcun campo a video ma il suo contenuto viene comunque spedito con gli altri dati del modulo. Nell'esempio sotto insieme agli altri dati inseriti dal visitatore, arriverebbe anche il campo sito col valore web-link
Questo attributo di type viene utilizzato per campi nascosti. Non viene mostrato alcun campo a video ma il suo contenuto viene comunque spedito con gli altri dati del modulo. Nell'esempio sotto insieme agli altri dati inseriti dal visitatore, arriverebbe anche il campo sito col valore web-link
<input type="hidden" name="sito" value="web-link">
image
Questo attributo di type viene utilizzato per definire una immagine grafica da usare come pulsante di submit per l'invio del modulo. L'attributo src richiama il nome completo ed eventuale percorso dove reperire l'immagine stessa. Trattandosi di una immagine grafica è possibile usare anche gli attributi alt e title visti per l'elemento <img>.
Questo attributo di type viene utilizzato per definire una immagine grafica da usare come pulsante di submit per l'invio del modulo. L'attributo src richiama il nome completo ed eventuale percorso dove reperire l'immagine stessa. Trattandosi di una immagine grafica è possibile usare anche gli attributi alt e title visti per l'elemento <img>.
<input type="immage" src="nome.jpg" title="premi per inviare" alt="submit">
password
Questo attributo di type viene utilizzato per le password, o meglio per inserire testo nel campo senza che questo venga visualizzato, al posto dei caratteri inseriti si vedranno una serie di asterischi o di pallini. Con l'attributo size è possibile impostare le dimensioni della finestra di input.
Questo attributo di type viene utilizzato per le password, o meglio per inserire testo nel campo senza che questo venga visualizzato, al posto dei caratteri inseriti si vedranno una serie di asterischi o di pallini. Con l'attributo size è possibile impostare le dimensioni della finestra di input.
<input type="password" size="25">
radio
Questo attributo di type viene utilizzato per selezionare un singolo valore su campi radio con diverse alternative. Se infatti allo stesso gruppo di radio viene assegnato lo stesso nome, un solo valore potrà essere selezionato. E' possibile con checked stabilire anche una preselezione o scelta iniziale, sono obbligatori gli attributi name e value.
Questo attributo di type viene utilizzato per selezionare un singolo valore su campi radio con diverse alternative. Se infatti allo stesso gruppo di radio viene assegnato lo stesso nome, un solo valore potrà essere selezionato. E' possibile con checked stabilire anche una preselezione o scelta iniziale, sono obbligatori gli attributi name e value.
<input type="radio" name="piace" value="si" checked>
<input type="radio" name="piace" value="no">
<input type="radio" name="piace" value="no">
Si noti come sia possibile selezionare una sola delle tre voci e come la prima sia già selezionata per default.
reset
Questo attributo di type viene utilizzato per creare un pulsante di reset che azzera il modulo riportandolo ai suoi valori iniziali e di conseguenza cancellando tutti i dati introdotti dall'utente. Con l'attributo value è possibile impostare il nome da visualizzare sul pulsante.
Questo attributo di type viene utilizzato per creare un pulsante di reset che azzera il modulo riportandolo ai suoi valori iniziali e di conseguenza cancellando tutti i dati introdotti dall'utente. Con l'attributo value è possibile impostare il nome da visualizzare sul pulsante.
<input type="reset" value="azzera">
submit
Questo attributo di type viene utilizzato per creare un pulsante per inviare il modulo una volta compilato, anche in questo caso l'attributo value permette di scegliere cosa scrivere sul pulsante.
Questo attributo di type viene utilizzato per creare un pulsante per inviare il modulo una volta compilato, anche in questo caso l'attributo value permette di scegliere cosa scrivere sul pulsante.
<input type="submit" value="Invia Dati">
text
Questo attributo di type viene utilizzato per creare i campi di testo a riga singola, si possono utilizzare gli attributi size e maxlength per impostare la dimensione del campo e la quantità massima di testo ammesso. Sono necessari gli attributi name e value rispettivamente per definire il nome univoco ed assegnare un ipotetico valore iniziale al campo, una specie di precompilazione..
Questo attributo di type viene utilizzato per creare i campi di testo a riga singola, si possono utilizzare gli attributi size e maxlength per impostare la dimensione del campo e la quantità massima di testo ammesso. Sono necessari gli attributi name e value rispettivamente per definire il nome univoco ed assegnare un ipotetico valore iniziale al campo, una specie di precompilazione..
<input type="text" value="testo iniziale" size=20" maxlength="48" name="pieno">
<input type="text" value="" size=20" maxlength="48" name="vuoto">
<input type="text" value="" size=20" maxlength="48" name="vuoto">
<option>
L'elemento <option> è utilizzato all'interno dell'elemento <select>, elenca una serie di diversi valori sui quali poter operare una scelta. Ha due attributi: selected (opzionale) per indicare il valore preselezionato e value per indicare i valori assegnati alle singole voci. Le possibili voci sono visibili cliccando sul triangolino a fianco della prima voce. Questo elemento necessita del relativo tag di chiusura: </option>
L'elemento <option> è utilizzato all'interno dell'elemento <select>, elenca una serie di diversi valori sui quali poter operare una scelta. Ha due attributi: selected (opzionale) per indicare il valore preselezionato e value per indicare i valori assegnati alle singole voci. Le possibili voci sono visibili cliccando sul triangolino a fianco della prima voce. Questo elemento necessita del relativo tag di chiusura: </option>
<select name="nome">
<option value="scelta uno">scelta uno</option>
<option value="scelta due">scelta due</option>
</select>
<option value="scelta uno">scelta uno</option>
<option value="scelta due">scelta due</option>
</select>
<select>...</select>
L'elemento <select> consente di effettuare delle scelte, singole o multiple, rappresentate dai vari elementi <option>. Ha tre possibili attributi: multiple per effettuare diverse scelte, name il nome che sarà inviato come intestazione delle scelte, size specifica il numero di voci visibili in elenco. Provate a selezionare le voci tenendo premuto il tasto CTRL o SHIFT come avviene normalmente per selezionare i files nel vostro sistema operativo, noterete che è possibile operare più di una singola scelta. Questo elemento necessita del relativo tag di chiusura: </select>
L'elemento <select> consente di effettuare delle scelte, singole o multiple, rappresentate dai vari elementi <option>. Ha tre possibili attributi: multiple per effettuare diverse scelte, name il nome che sarà inviato come intestazione delle scelte, size specifica il numero di voci visibili in elenco. Provate a selezionare le voci tenendo premuto il tasto CTRL o SHIFT come avviene normalmente per selezionare i files nel vostro sistema operativo, noterete che è possibile operare più di una singola scelta. Questo elemento necessita del relativo tag di chiusura: </select>
<select multiple name="nome">
<option value="scelta uno" >scelta uno</option>
<option value="scelta due" >scelta due</option>
</select>
<option value="scelta uno" >scelta uno</option>
<option value="scelta due" >scelta due</option>
</select>
<textarea>...</textarea>
L'elemento <textarea> consente di immettere testo su più righe, praticamente si crea un'area per l'immissione di testo decisamente più comoda di una sola riga nel caso in cui si prevede l'introduzione di testo libero di una certa lunghezza. Gli attributi rows e cols rispettivamente per righe e colonne specificano le dimensioni di questa area testo. Questo elemento necessita del relativo tag di chiusura: </textarea>
L'elemento <textarea> consente di immettere testo su più righe, praticamente si crea un'area per l'immissione di testo decisamente più comoda di una sola riga nel caso in cui si prevede l'introduzione di testo libero di una certa lunghezza. Gli attributi rows e cols rispettivamente per righe e colonne specificano le dimensioni di questa area testo. Questo elemento necessita del relativo tag di chiusura: </textarea>
<textarea name="nome testo" cols"22" rows="5"></textarea>
Un esempio con molti dei vari elementi ed attributi spiegati sopra. 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 nei parametri del form stesso.
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 qui:<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 che 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 ai vari elementi che compongono i moduli. il colore, il tipo di font e molto altro ancora.
Con HTML5 sono stati introdotti molti nuovi type e molti nuovi attributi per gestire al meglio i moduli o forms, potete trovarli sulla Guida HTML5 di web-link
link originale: http://www.web-link.it/html/9_form.htm
Commenti
Posta un commento