Solitamente i form per l'invio di dati utilizzano linguaggi di "programmazione" come Perl, Asp o Php. Il fatto stesso che questi script siano lato server (vengono cioè interpretati dal server remoto e non dal browser dell'utente) rende possibile, al 99% dei casi, la riuscita dell'operazione; l'1% dei malfunzionamenti è dovuto ad un problema abbastanza grave (ad esempio potrebbe essersi bloccato il motore perl o il server di posta) ma mai dipenderà da qualche impostazione del navigatore.
Ovviamente consiglio sempre l'uso di forme più professionali e sicure come quelle lato server ...ma per un attimo mettiamoci nei panni di un webmaster in erba: dato che nessuno "nasce imparato" (o almeno così dovrebbe essere) è normale che i primi esperimenti per ricevere dati si facciano costruendo un banalissimo modulo in html; se aggiungiamo inoltre che il sito si trova su uno spazio gratuito (e non offre la possibilità di tecnologie più avanzate) la scelta è a senso unico.
Probabilmente non tutti sanno che è possibile costruire dei moduli in html con destinatari "dinamici"; con la parola "dinamico" intendo dire che si può variare, ad ogni invio, il soggetto che riceverà i dati. Questa caratteristica ci permette di pensare a nuovi interessanti utilizzi dei moduli visto che finora eravamo stati abituati ad impostare un unico destinatario statico.
A tal proposito si potrebbe realizzare un codice lato client che abbia le stesse funzioni dei ben più performanti script in Cgi; la funzione è quella che normalmente chiamiamo "Suggerisci il sito ad un amico"
Ad esempio, dato che i form in html si appoggiano al programma di posta dell'utente, potrebbe accadere che l'invio non vada a buon fine se l'utente stesso non ha ben configurato il proprio pc.
Fatte queste doverose avvertenze procediamo con l'analisi di un primo form di prova.
Ecco il codice di un primo form di prova:
<html>
<head>
<title>Segnala sito</title>
<script language="Javascript">
<!--
/*
saibal copyright 2001 - http://www.lorenzone.it
*/
function destin() {
var destinatario=document.forms[0].elements[1].value;
var link = "http://www.html.it.it"; // <span style="color:#ba1b0a">url del sito da suggerire</span>
var messaggio_iniziale = "Messaggio inviato a " + destinatario; // <span style="color:#ba1b0a">messaggio
iniziale dell'email</span>
var mittente = document.forms[0].elements[0].value;
document.forms[0].elements[2].name = messaggio_iniziale;
// soggetto dell'email
funz_destinatario = "mailto:" + destinatario + "?subject=Sito da visitare!!";
document.forms[0].action = funz_destinatario;
// testo che segue il messaggio iniziale
document.forms[0].elements[2].value = " Ciao amico/a, " + mittente + " pensa che questo sito ti
potrebbe interessare " + link;
}
//-->
</script>
</head>
<body bgcolor="white" >
<form ENCTYPE="text/plain" name="form" method='post' action='' onSubmit="return destin()">
<table cellspacing="0" cellpadding="0" width="450">
<tr>
<td><font face="verdana" size="2">Il tuo nome:</font></td>
<td><input type="text" size="26" maxlength="40" ></td>
</tr>
<tr>
<td><font face="verdana" size="2">Email destinatario:</font></td>
<td><input type="text" size="26" maxlength="40"></td>
</tr>
<tr>
<td> </td>
<td><input type="hidden"></td>
</tr>
<tr>
<td><font face=verdana size=2>Commenti e suggerimenti:</font></td>
<td><textarea name="Commenti " ROWS=6 COLS=30 wrap=virtual></textarea></td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="Spedisci">
<input type="reset" value="Reset">
</td>
</tr>
</table>
</form>
</body>
</html>
La prima cosa che dovrebbe balzare agli occhi è che il tag <form> non ha dichiarato l'action che invece, in un normale modulo html, sarebbe impostato su mailto:indirizzo@mail.it
La risposta a questo dilemma è presto detta: l'action del form, solitamente, contiene l'email del destinatario ma il nostro scopo è renderlo dinamico e non statico; proprio per questo motivo utilizziamo javascript. Al momento di premere INVIO, infatti, il form richiama una funzione chiamata destin()
N.B. Ricordiamoci che il conteggio degli elementi in un form avviene partendo dall'elemento numero 0
var destinatario
La variabile destinatario
var link
La variabile link
var messaggio_iniziale
È il messaggio iniziale dell'email; la variabile "destinatario" verrà sostituita, naturalmente, con l'indirizzo inserito nel form.
funz_destinatario
Se prima abbiamo visto che la variabile destintario corrispondeva al valore del secondo campo del form (email), adesso dichiariamo che funz_destinatario
mailto: .....
È ovvio che + destinatario +
Sito da visitare!!
document.forms
È questa una stringa chiave; si può "leggere" che l'action del form deve essere uguale a funz_destinatario "mailto:indirizzo_destinatario?subject=Sito da visitare!!"
I conti iniziano a tornare no? Quasi... dobbiamo ancora spiegare due cose: come mai c'è un campo hidden name
Iniziamo dal secondo punto. In un modulo html l'attributo name
1) Il nome identifica in modo univoco un textfield e ciò può essere utile in molti casi (ad es. per il controllo del form con javascript). La sintassi completa di un campo di testo è simile a : <input type="text" nome="prova" value="valore iniziale facoltativo" size="20" maxlength="50">
2) Identificare con un nome i campi del form fa in modo che i dati inseriti dall'utente negli input vengano stampati nell'email. Mi spiego: supponiamo di avere due campi di testo chiamati rispettivamente nick nome
<form name="prova" method="post" action="mailto:prova@prova.it">
<input type="text" nome="nick" value="" size="20" maxlength="50">
<input type="text" nome="nome" value="" size="20" maxlength="50">
<input type="submit" name="bottone" value="Spedisci">
</form>
Con un form di questo tipo, dopo averlo riempito ed inviato, riceverò un modulo così strutturato:
nick = Saibal
nome = Lorenzo
bottone =
Come vedete, accanto al nome di ogni input, compare il valore inserito nel relativo campo; se invece avessi omesso il parametro name
Come mai, allora, nel form che stiamo costruendo non compare l'attributo "nome" ma vengono stampati comunque i risultati?
Semplice: assegnano un attributo name
document.forms[0];.elements[2];.name = messaggio_iniziale;
"Letto" in italiano dovrebbe essere: "Il terzo elemento del form (il campo hidden) avrà come nome messaggio_iniziale var messaggio_iniziale "Messaggio inviato a " + destinatario + " ";
Adesso aggiungo:
document.forms[0].elements[2].value = " Ciao amico/a, " + mittente + " pensa che questo sito ti potrebbe interessare " + link;
"Leggiamo" ancora una volta ed ottieniamo: "Il valore del terzo elemento del form (il campo hidden) avrà come valore
A questo punto fermiamoci un attimo per fare due calcoli e capire cosa riceveremo nella casella di posta.
Il form è composto da:
- due campi di testo visibili: uno per il nome del mittente e l'altro per l'email del destinatario
- una textarea per i commenti
- un campo hidden
- un bottone submit
- un bottone reset
Guardando il codice html del form notiamo che solamente la textarea ha l'attributo name nome valore
Messaggio inviato a xxx@xxx.it = Ciao amico/a, saibal pensa che questo sito ti potrebbe interessare http://www.html.it
Commenti = Un bel sito!! Soprattutto il forum!!
Ecco quindi che, da un form con 6 elementi (3 campi text, una textarea e due bottoni), abbiamo un'email con solo due elementi stampati (quelli che ci interessano di più): il campo hidden e il campo commento.
Il form di prova analizzato è funzionante ma un minimo di controllo si rende necessario per evitare che, accidentalmente o meno, vengano inviati dei moduli vuoti. Ancora una volta ricorriamo a javascript per "obbligare" l'utente a riempire i campi Mittente Email destinatario
<html>
<head>
<title>segnala sito</title>
<script language="Javascript">
<!--
/*
saibal copyright - 2001 - http://www.lorenzone.it
*/
var emailAddress="";
function destin() {
var link = "http://www.html.it"; // sito da suggerire
var messaggio_iniziale = "Messaggio inviato a " + emailAddress; // messaggio iniziale dell'email
var mittente = document.forms[0].elements[0].value;
var destinatario=document.forms[0].elements[1].value;
document.forms[0].elements[2].name = messaggio_iniziale;
funz_destinatario = "mailto:" + destinatario + "?subject=Sito da visitare!!"; // soggetto dell'email
document.forms[0].action = funz_destinatario;
document.forms[0].elements[2].value = " Ciao amico/a, " + mittente + " pensa che questo sito ti potrebbe interessare " +
link; // testo che segue il messaggio iniziale
}
// funzione submit che segue al controllo della funzione nome ed email
function submitForm() {
if ( (nome() ) && (email()) )
if (confirm("nIl form sarà spedito a :nn"+emailAddress+"nn Confermi l'invio?"))
return true;
else
alert("nHai interrotto l'invio");
return false;
}
// funzione di controllo sul campo nome
function nome() {
var controlla = document.forms[0].elements[0].value;
if (controlla == "") {
alert("nNon hai inserito il tuo nome.nnPer favore inseriscilo.")
document.forms[0].elements[0].focus();
return false;
}
return true;
}
// funzione di controllo sul campo email
function email() {
emailAddress=document.forms[0].elements[1].value;
if (document.forms[0].elements[1].value == ""){
alert("nNon hai inserito l'email del distinatario.")
document.forms[0].elements[1].focus();
return false;
}
if (document.forms[0].elements[1].value.indexOf ('@',0) == -1 || document.forms[0].elements[1].value.indexOf ('.',0)
== -1) {
alert("nL' E-mail deve contenere "@" e uno o più "."")
document.forms[0].elements[1].select();
document.forms[0].elements[1].focus();
return false;
} else {
destin();
return true;
}
}
//-->
</script>
</head>
<body bgcolor="white" >
<form enctype="text/plain" name="form" method='post' action='' onSubmit="return submitForm()">
<table cellspacing="0" cellpadding="0" width="450">
<tr>
<td><font face=verdana size=2>Il tuo nome:</font></td>
<td><INPUT TYPE="text" SIZE="26" MAXLENGTH=40 ></td>
</tr>
<tr>
<td><font face=verdana size=2>Email destinatario:</font></td>
<td><INPUT TYPE="text" SIZE="26" MAXLENGTH=40 ></td>
</tr>
<tr>
<td></td>
<td><INPUT TYPE="hidden"></td>
</tr>
<tr>
<td><font face=verdana size=2>Commenti e suggerimenti:</font></td>
<td><TEXTAREA NAME="Commenti " ROWS=6 COLS=30 wrap=virtual></TEXTAREA></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Spedisci">
<input type="reset" value="Reset"> </td>
</tr>
</table>
</form>
</body>
</html>
Ecco qua: abbiamo inserito tre nuovi funzioni che effettuano un controllo sui dati inseriti: function submitForm() function nome() function email()
Al momento di premere INVIO viene richiamata la funzione submitForm() submitForm() destin()
Adesso non ci resta altro che implementare lo script nelle nostre pagine ed aspettare che qualcuno suggerisca il nostro sito a qualche amico :)
