Tecnologie Web – Moduli HTML e Javascript

• Introduzione
• I Form HTML
• Costruiamo il primo Form
• Inseriamo il primo script Javascript
• Testiamo il nostro lavoro

Introduzione
In questo articolo, affronto il problema della creazione dei moduli in HTML e l’interazione con javascript.
Questo approccio, ti permette di avvicinarti, in modo graduale a Javascript, anche se oggi sono utilizzati “Framework” quali “Jquery”, “BootStrap”, “AngularJS”, ed altri un minimo di infarinatura in Javascript, non guasta.
In questo primo articolo, io mi soffermo sulla creazione dei “Form HTML”.

I form html

Un “form” o modulo HTML è un insieme di elementi, che consento all’utente di inserire dei dati in una pagina web, e di inviare i dati per una successiva e immediata elaborazione.
Molti siti web personalizzano, i loro contenuti in base alle scelte operate dai loro utente visitatori, per le più svariate applicazioni.
Ad esempio quando un utente, utilizza un servizio di “E-commerce”, “e-banking”, “webmail”, “social netowk”, inserisce dei dati che sono inviati ad un’applicazione remota che elabora i dati ricevuti e trasmette all’utente mediante il browser un output in formato “html”.
L’interazione di moduli HTML con le applicazioni che ricevono i dati possono essere di due tipi:
applicazione “Client” e “Applicazione Server”.
In seguito, le applicazioni possono essere combinate per ottenere varianti al modello utilizzato fino a qualche anno fa; infatti occorre combinare le applicazioni in quattro modalità differenti:

• 1- Client statico – server statico;
• 2- Client dinamico – server statico
• 3- Client statico – server dinamico
• 4- Client dinamico – server dinamico

Il primo caso è molto semplice, il client invia una richiesta inviando un URL, e il server risponde inviando la risorsa indicata nell’URL se esiste, altrimenti invia un messaggio di errore tipicamente un errore di tipo 404 (codice utilizzato dai web server per indicare l’assenza del documento richiesto)
Il secondo caso il client può elaborare le informazioni mediante un linguaggio di scripting lato “client” come “javascript” o altro, oppure scaricare un programma applet dal server che invia un programma compilato che viene eseguito nel browser. Ad esempio un client richiede una pagina web che prevede lo scaricamento dal server di un programma compilato che si occupa dell’elaborazione.
Nel terzo caso il client invia una richiesta statica con dei dati all’interno della richiesta. Un applicazione “server ” elabora la richiesta e restituisce un risultato grazie all’esecuzione sul serve remoto di un programma scritto in “PHP”, “C#”, “Java”, “Python”.
L’ultima tipologia di situazione unisce sia un’elaborazione sul client per esempio per la validazione dei dati (verificare se un utente inserisce un indirizzo email corretto, etc.), e fa uso di un’applicazione server che in modo parametrico come nel terzo caso elabora i dati ricevuti mediante un programma e restituisce un output in formato HTML.
Tutto questo, con l’uso del protocollo” TCP” “HTTP” o “HTTPS”.
Fatta questa premessa, un “Form” o Modulo è un insieme di componenti di Input e Output di un’interfaccia che possiamo definire “FrontEnd” scritta in HTML.
Il tag utilizzato è <FORM name=”nome form” id=”nome form” method=”GET o POST” action=”nome file da eseguire/ funzione” [OnSubmit=”nome funzione/o file”] [target=”tipo finestra”] > e la relativa chiusura è </FORM>.
Gli attributi “name” e “id” indicano il nome dell’oggetto nel modello DOM “Document Object Model” o nel relativo programma server. L’attributo “action” indica il programma server da eseguire oppure la funzione lato “client” da richiamare nel caso di script “Javascript”. Nell’attributo “action” è possibile inserire sia percorsi relativi che assoluti rispetto alla cartella radice del sito. L’attributo “method” è utilizzato quando è necessario inviare i dati ad un’applicazione “server”. il metodo “GET” invia i dati inserendoli nell’URL e sono visibili, a meno di non crittografarli, nel metodo “POST” sono inviati in “background” su un canale http/https separato. Quest’ultima modalità è consigliata quando è necessario inviare molti dati, o ad esempio eseguire upload di file.
L’attributo “target” che può essere “_blank”. “_parent”, “_self” indica in quale finestra del Browser si deve aprire la risposta all’invio dei dati. Nel caso dell’attributo con valore “_blank” si intende una nuova finestra, “_self” nella stessa finestra, “_parent” nel “frame” principale o nella stesa finestra in caso di assenza di “Frame”.
L’attributo “OnSubmit” indica un evento specifico che accade all’invio del “form” ovvero il “Submit” o “invio”, In questo caso è possibile richiamare uno script o un programma “server” che viene eseguito all’invio.
Esistono diversi eventi, che possono accadere nella pagina HTML.
Il tag principale per costruire le componenti è il tag “<INPUT>” che non prevede chiusura. la sintassi completa del tag “<INPU> è:

<input type=”tipo controllo” name=”nome controllo” id=”nome controllo” value=”valore di default” size=”dimensione del campo input”>
Il valore dell’attributo “type” può essere “text”, “textarea”, “radio”, “checkbo”, “listbox”, “image”, “button”, “submit”, “reset”, “file”.
Per ora, prendiamo in considerazione il tipo “text” casella di testo e il tipo “textarea” ovvero un’area di testo, e “submit” e “reset” che sono due pulsanti di comando da inserire sempre in html. L’attributo “value” indica il valore del campo predefinito non obbligatorio, l’attributo “size” indica il numero di caratteri di quel campo.
Per vedere l’effetto scriviamo un semplice codice HTML di esempio:

Costruiamo il primo form html

<!DOCTYPE HTML>
<html>
<head<
<meta charset="utf8"></head>
<title>Primo form html</title>
<script type="text/javascript" >
function saluto()
{
	alert("Ciao "+nome.value+" "+messaggio.value);
	return true;
}
</script>
</head>
<body>
<form neme="saluta" id="saluta" OnSubmit="return saluto()" action="" method="">
<table border=="2">
<tr><td>Nome Persona:</td><td><input type="text" id="nome" name="nome" value="digita il tuo nome" size="30">
</td></tr>
<tr><td>Messaggio: </td><td><input type="textarea" id="messaggio" name="messaggio" value="il tuo messaggio">
</td></tr>
<tr><td><input type="submit" name="conferma" id="onferma" value="Invia"></td>
<td><input type="reset" name="cancella" id="cancella" value="Elimina dati"></td>
</tr>
</table>
</form>
</body>
</html>

Test del nostro primo form

<script type="text/javascript" >
function saluto()
{
	alert("Ciao "+nome.value+" "+messaggio.value);
	return true;
}