aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Interazione tra JavaScript e form HTML

 

I moduli HTML (form) sono una sorta di questionari compilabili online da parte dei visitatori di un sito web. Inizialmente il loro utilizzo era limitato: si adottavano esclusivamente per raccogliere informazioni sulle opinioni e sulle preferenze degli utenti. I moduli compilati venivano infatti poi automaticamente inviati ad un indirizzo e-mail (ad esempio, quello del webmaster del sito Internet).
Oggi, le possibilità di utilizzo dei form si sono enormemente ampliate: vengono utilizzati, su un sempre maggior numero di siti, per interagire con l’utente. Ad esempio, form online vengono proposti per effettuare ricerche all’interno degli articoli contenuti in un sito, per inviare i propri messaggi in un forum, per gestire contenuti ed aree specifiche del sito e così via.

Per interagire con un modulo HTML mediante codice JavaScript, è necessario far uso - nella propria pagina web - delle apposite tag <FORM> e </FORM>.
Proviamo ad inserire, nella nostra pagina HTML, un form che richieda all’utente di digitare il suo indirizzo e-mail verificandone, successivamente, la validità.

Per motivi di semplicità, limiteremo il controllo circa la validità dell’indirizzo di posta elettronica specificato, alla presenza del simbolo @ (at o chiocciolina). Se l’utente inserirà una stringa di testo contenente la chiocciolina, quanto introdotto nel campo di testo verrà considerato come un indirizzo e-mail valido. E’ ovvio che nella “vita reale” si dovranno sviluppare dei controlli aggiuntivi sulla validità dell’indirizzo e-mail (ad esempio, verificare la presenza di un suffisso .it, .com, .net, .org e così via…).

Iniziamo con l’inserire il codice HTML per la visualizzazione di una casella di testo e di un pulsante Invia:

<html><head></head>
<body>

<form name="form_email" action="form_ok.html">
Inserisci il tuo indirizzo e-mail:
<input type="text" name="email">
<input type="submit" value="Invia">
</form>
</body></html>

Assicuriamoci di assegnare al form HTML un nome specifico, inserendo il parametro name (nel nostro caso, abbiamo scelto il nome form_email).

Il parametro action consente di stabilire la pagina ove il browser Internet deve essere reindirizzato dopo la pressione, da parte dell’utente, del pulsante Invia.
Le tag <INPUT>, che debbono essere sempre comprese tra <FORM> e </FORM>, consentono di stabilire gli elementi facenti parte del modulo HTML. Per ogni tag <INPUT> è necessario indicare, ricorrendo al parametro type, il tipo di elemento che si vuole utilizzare.

Ad esempio, specificando type=”text”, si inserirà, nel modulo HTML, una casella di testo; con type=”checkbox” una casella che può essere spuntata o meno; con type=”radio” un “option box”; con type=”button” un pulsante…
Type=”submit” è importantissimo: consente di inserire un pulsante “speciale” che provvede ad inviare il contenuto del form all’indirizzo specificato nel parametro action.
Per approfondire l’utilizzo dei form HTML e scoprire tutte le possibilità che questi offrono, vi consigliamo di fare riferimento all’indirizzo http://www.w3.org/TR/REC-html40/interact/forms.html (in lingua inglese).

Passiamo, a questo punto, alla stesura dello script che consentirà la validazione dell’indirizzo e-mail inserito da parte dell’utente.

Provvediamo, quindi, a collocare - al solito - tra i tag <HEAD> e </HEAD> (intestazione), il codice JavaScript seguente:

<script type="text/javascript">
function controlla()
{
x=document.form_email
at=x.email.value.indexOf("@")
if (at == -1)
{
alert("Indirizzo e-mail non valido.")
return false
}
}
</script>

Cosa abbiamo scritto? In primo luogo abbiamo denominato controlla() la funzione che effettua la validazione dell’indirizzo e-mail. Una volta invocata tale funzione, JavaScript memorizza nella variabile x il contenuto del form form_email.

L’istruzione successiva recupera, prima, il valore del campo denominato email (x.email.value), quindi applica il metodo indexOf. Tale metodo restituisce la posizione della prima occorrenza della stringa specificata all’interno di un’altra stringa. Se la stringa indicata tra parentesi tonde non viene trovata, il metodo restituisce il valore -1.
Per fare un esempio concreto, supponiamo di assegnare ad una variabile x la stringa “La mia rivista preferita è PC Open”:

x="La mia rivista preferita è PC Open"
pos=x.indexOf("PC Open")
document.write(pos)

Invocando il metodo indexOf("PC Open"), lo script cercherà la prima occorrenza della stringa PC Open all’interno della frase La mia rivista preferita è PC Open.
La variabile pos assumerà, in questo caso, il valore 27 (la stringa PC Open è stata trovata in corrispondenza del ventisettesimo carattere). Provate a sostituire la seconda istruzione con la seguente:

pos=x.indexOf("La gazzetta")

In questo caso, il metodo indexOf restituirà il valore -1 (non è stata trovata alcuna occorrenza de La gazzetta).

Analogamente, nel nostro esempio, indexOf permette di ricercare il simbolo “@”, all’interno della stringa specificata dall’utente nel campo email; il valore restituito viene memorizzato nella variabile at. A questo punto utilizziamo l’istruzione condizionale if…else per controllare il valore assunto dalla variabile at: se il valore è -1 (non è stata trovata alcuna occorrenza di “@”) viene mostrato il messaggio d’errore “Indirizzo e-mail non valido” inoltre, la funzione controlla() assumerà il valore false (return false).

Ora inseriamo, nel codice HTML che consente la visualizzazione del form, l’invocazione della funzione controlla(): aggiungiamo, nella tag <FORM> un riferimento all’evento onSubmit (ciò significa che non appena l’utente agirà sul pulsante Invia (Submit), verrà eseguita la funzione JavaScript appena illustrata).

L’argomento dell’evento onSubmit è return controlla(). Il return che precede la chiamata della funzione controlla(), permetterà di annullare l’invio del contenuto del form alla pagina form_ok.html (specificata col parametro action) se la funzione restituisce il valore false (come abbiamo visto, tale valore viene assunto solo nel caso in cui @ non sia presente, ossia qualora l’indirizzo e-mail non sia valido). Se invece la funzione controlla() restituisce un valore diverso, l’invio dei dati del form verrà consentito.

La validazione dei dati (ossia il controllo della loro correttezza) sul lato client (ossia direttamente sul personal computer dell’utente che visita il nostro sito web), permetterà di evitare di sovraccaricare il server web che ospita il sito di un lavoro aggiuntivo. JavaScript rappresenta, quindi, la migliore soluzione per la realizzazione di questo tipo di controlli.

 


Clicca per ingrandire

Il codice HTML e lo script JavaScript sono contenuti all’interno del file form_email.html nel CD ROM.

L’esempio form_focus.html presenta, invece, l’utilizzo del metodo focus() per selezionare un campo specifico facente parte di un qualsiasi modulo HTML presente nella pagina web.

L’istruzione document.forms[0].campo1.focus(), consente di selezionare (impostare il “focus”) sull’elemento denominato campo1, contenuto nel primo modulo HTML (forms[0]) posizionato nella pagina web (document). In questo caso infatti, non avendo assegnato alcun nome al form (servendoci del parametro name), possiamo interfacciarci ricorrendo all’array forms[0].

Qualora avessimo attribuito al modulo HTML il nome “mioform” (<FORM name=”mioform”>...</FORM>), avremmo potuto utilizzare l’istruzione document.mioform.campo1.focus() in luogo di document.forms[0].campo1.focus() (com’è possibile verificare visionando il file form_focus_2.html).

  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
  Sesta lezione:
  Siti interattivi
1. JavaScript e DHMTL
2. Programmazione orientata agli oggetti
3. Browser e script
4. Oggetti e proprietà
5. Eventi e funzioni
6. Variabili e stringhe
7. Operatori in JavaScript
  1. Esempio riassuntivo
8. Istruzioni condizionali
9. Strutture iterative
10. Interazione tra JavaScript
e form HTML
11. Interazione tra JavaScript
e frame
12. Linee guida programmazione
13. DHMTL

 Copyright© PC Open - 2002 - 2003

Credits