intro | lezioni | articoli | dizionario | download | e-mail |
Ma lasciamo perdere ed andiamo subito al sodo. Una form non è altro che una scheda, un modulo che possiamo creare all'interno del nostro sito per ottenere informazioni da parte dei visitatori che intendono compilarlo ed inviarci le informazioni di cui facciamo richiesta.
Alla fine di questa prima lezione (la prima di quattro) sarai già in grado di implementare una semplice form.
Ancora una volta, niente di complicato, si inizia con una coppia di tag che racchiudono tutti gli elementi (i diversi campi della scheda) che andranno a costituire il form e che, viva la fantasia, si chiamano <FORM> </FORM>.
All'interno di questi due tag posso inserire, oltre ai campi che costituiranno la scheda vera e propria anche altri tag di HTML che posso ritenere necessari.
Inseriamo tre campi di testo, nel primo chiederemo di inserire il nome, nel secondo il nome dell'autore preferito e nel terzo l'indirizzo di posta elettronica.
Dichiaro l'apertura della form
<FORM>
quindi inserisco il primo campo di testo:
<STRONG>Inserisci il tuo nome</STRONG><BR>
<INPUT type="text" value="il tuo nome"
name="Nome" maxlength="50" size="20">
(N.B. la coppia di tag <STRONG> </STRONG> produce in molti browser lo stesso effetto della coppia di tag <B> </B>, ossia un grassetto) ti presento il tag <INPUT>! Con questo tag possiamo inserire dei campi all'interno di una form. Analizziamo ora il resto della sintassi. Il tipo di campi che è possibile inserire cambia a seconda del valore che assegnamo all'attributo type ma su questo torneremo più tardi.
Assegnando un valore all'attributo value posso visualizzare tale valore all'interno del campo di testo se non inserisco questo attributo il campo di testo risulterà vuoto (almeno fintanto che il visitatore non intende riempirlo con le informazioni richieste).
Assegnando un valore all'attributo name attribuisco un nome al campo in questione, questo è importante perchè quando riceverò l'e-mail con le informazioni ognuna di esse sarà legata al nome del campo che ho definito con questo attributo.
Assegnando un valore all'attributo maxlength si stabilisce la lunghezza massima del numero di caratteri che è possibile digitare all'interno del campo di testo (se non si omette questo attributo all'interno di un campo di testo sarà possibile scrivervi anche la Divina Commedia!), mentre il numero assegnato all'attributo size stabilisce la lunghezza del campo di testo (se si omette questo attributo ogni sistema operativo stabilirà una lunghezza di default.). Se il numero dei caratteri che posso inserire è molto alto (ossia se ho specificato un valore alto per l'attributo maxlength e se la lunghezza del campo di testo è minima (ossia se ho specificato un valore basso per l'attributo size il testo scomparirà verso sinistra a mano a mano che si digitano altri caratteri...
...quello sguardo allucinato che vedo nei tuoi occhi mi fa capire che un esempio pratico saprà illuminarti più di ogni mia farneticazione.
All'interno di una form, questa linea di codice
<INPUT type="text" maxlength="50" size="5">
produce questo risultato:
In questo piccolo campo di testo posso inserire fino a 50 caratteri, chiaramente non riuscirò a visualizzarli tutti contemporaneamente, succederà dunque che i caratteri scorreranno verso sinistra (dando l'impressione di scomparire, ma non preoccuparti, è solo un'impressione) per far posto ai nuovi, e questo finchè non sarà raggiunto il limite massimo di 50 caratteri che ho fissato.
Passo ora ad inserire il secondo ed il terzo campo di testo:
<STRONG>Inserisci il tuo autore
preferito</STRONG><BR>
<INPUT type="text" value="il tuo autore"
name="Autore"><P>
<STRONG>Inserisci il tuo e-mail</STRONG><BR>
<INPUT type="text" value="il tuo e-mail" name="E-
mail">
Bene, inseriti i tre campi di testo, possiamo includere un bottone che consenta di inviare le informazioni apppena introdotte.
<INPUT type="submit" value="Spedisci">
Nota bene, questa volta il valore assegnato all'attributo type è button (utilizzando dunque un'analoga sintassi abbiamo introdotto un diverso elemento di una form, il bottone appunto, semplicemente sostituendo il valore assegnato all'atributo type), l'attributo value, in questo caso, consente di specificare la o le parole che appariranno sul bottone.
A questo punto dichiaro la conclusione del form inserendo l'opportuno tag di chiusura
</FORM>
Ricapitolando ecco il listato che abbiamo prodotto:
<FORM>
<STRONG>Inserisci il tuo nome</STRONG><BR>
<INPUT type="text" value="il tuo Nome"
name="Nome"><P>
<STRONG>Inserisci il tuo autore
preferito</STRONG><BR>
<INPUT type="text" value="il tuo autore"
name="Autore"><P>
<STRONG>Inserisci il tuo e-mail</STRONG><BR>
<INPUT type="text" value="il tuo email" name="E-
mail" maxlength="50" size="20"><P>
<INPUT type="submit">
</FORM>
Ed ecco il risultato che produce questo listato.
Et voila! Ecco la tua prima form :-) Beh, a voler essere pignoli si potrebbe notare che per come è stato costruito, questo form, non è un granchè, ad essere più precisi risulta del tutto inutile, difatti se si prova a schiacciare il bottone Spedisci si otterrà come risultato: il grande nulla (bel libro di James Ellroy).
E allora badiamo alla sostanza, ossia, una volta realizzata la mia piccola form come faccio a farmi arrivare queste informazioni via e-mail? Ci sono due metodi il primo è un po' più rozzo ma infinitamente più semplice e immediatamente utilizzabile con le conoscenze sin qui apprese, il secondo richiede che mastichiate un po di Perl che abbiate accesso ad un server che vi mettiate una calzamaglia rossa con mantello blu e sappiate volare alla velocità della luce...
...non scoraggiarti, anche questo si può fare senza chiamarsi Superman, ma prima di imparare a volare sarà bene riuscire a stare in piedi senza cadere!
Procediamo dunque con ordine, è ovvio che se inserisco un form all'interno del mio sito voglio fare in modo che queste informazioni, una volta inserite possano giungere a destinazione (ossia possano arrivarmi via e-mail). Il metodo più semplice consiste nell'aggiungere un paio di attributi al tag <FORM> di apertura:
<FORM action="mailto:gabriele.gigliotti@lamezianet.it"
method="post">
Con il primo di questi due attributi sto specificando l'indrizzo di posta elettronica al quale voglio che siano inviate le informazioni raccolte, con il secondo attributo (che può assumere due diversi valori, ossia get e post) specifico il modo in cui le informazioni devono essere inviate, ci basti sapere che, per questo sistema, è necessario inserire il valore post.
Bene, a questo punto sarai in grado di ricevere via e-mail le informazioni che ti sono eventualmente state inviate, tuttavia avrai il tuo bel da fare nella lettura dell'e-mail che riceverai perchè tali informazioni ti arriveranno prive di alcuna formattazione. Difatti ecco un esempio di quello che potresti ricevere via e-mail se un tuo visitatore compilasse e ti spedisse le info richieste dal form di cui sopra.
Nome=Gabriele&Autore=Stefano+Benni&E-
mail=gabriele.gigliotti@lamezianet.it
Come avevo detto c'è anche il metodo più difficile, ma proprio perchè tale ci arriveremo con calma in una successiva lezione.
Per ora ci basti sapere che è possibile in questo modo gestire piccole form, forse in un modo poco elegante, ma di semplice implementazione.
Nella prossima lezione invece vedremo quali altri campi possono essere inseriti all'interno di una form.
|
|
