Un documento HTML è in grado di ricevere dati da parte dell'utente tramite l'uso di moduli (form) contenenti vari tipi di campi di input.
Un modulo è delimitato dai marcatori
<form>...</form>
È bene però introdurre nel marcatore di apertura attributi di stile che specifichino le caratteristiche grafiche del modulo.
<form id="dati" style="background-color:darkgray; width:25%; text-align:center" >
È importante soprattutto l'identificatore (id) che nell'esempio è "dati"
per potere, volendo elaborare i dati immessi nei campi del modulo, far riferimento ad essi.
In HTML sono obbligatori gli attributi action e method perché molto spesso l'elaborazione dei dati in input viene demandata al server, il più delle volte con l'uso di bottoni submit (vedi sotto).
Dentro al modulo si possono inserire, disponendoli in modo ordinato e con le necessarie didascalie, i campi di input, con una sintassi del seguente tipo:
<input type="text" id="input1" size="10" value ="0" />
Questa istruzione viene visualizzata dal browser con un rettangolo a sfondo bianco
all'interno del modulo, di altezza adatta a contenere i caratteri e larghezza specificata,
in numero di caratteri dal valore di size.
Nel rettangolo è inizialmente visualizzato il valore "0".
Anche in questo caso è importante introdurre un identificatore per il campo.
i campi di input di tipo text possono essere usati anche come campi di output. In questo caso è bene usare l'attributo readonly per evitare che questi campi accettino input da tastiera.
<input type="text" id="out1" size="10" value ="" readonly="readonly" />
Altro tipi frequente di input sono
il bottone di conferma:
<input type="button" id="bottone_ok" value =" OK " />
In questo caso l'attributo value specifica la scritta che appare sul bottone.
il bottone di reset:
<input type="reset" id="bottone_reset" value =" reset " />
Attivando questo bottone i valori dei campi sono riportati a quelli iniziali.
il bottone di submit:
<input type="submit" id="bottone_submit" value =" invia " />
Attivando questo bottone i valori dei campi sono spediti al server di rete con le modalità
specificate da action e method.
Il server può, ad esempio, immettere i valori in un database, o elaborarli secondo procedure
predeterminate e rispedire al mittente gli esiti dell'elaborazione.
Risulta spesso utile (anche per evitare errori) offrire all'utente la possibilità di scegliere l'input tra un elenco di opzioni possibili.
<select id="sesso">
<option value="M" selected="true">Maschio</option>
<option value="F" >Femmina</option>
</select>
I campi di input/output possono utilmente essere preceduti da una didascalia che ne indica il contenuto. A questo scopo è utile il tag label con l'attributo for.
Esempio
<p> </p> <form id="dati" style="position:relative; width:40%; left:30%; background-color:deepskyblue; text-align:center"> <p><b>Dati personali</b></p> <p> <label for="campo_nome">nome </label> <input type="text" id="campo_nome" size="20" value="" /> </p> <p> <label for="campo_cognome">cognome </label> <input type="text" id="campo_cognome" size="20" value="" /> </p> <p> <label for="campo_sesso">sesso </label> <select id="campo_sesso"> <option value="M">Maschio</option> <option value="F">Femmina</option> </select> </p> <p> <label for="campo_studio">titolo di studio </label> <select id="campo_studio"> <option value="0">Nessuno</option> <option value="1">Elementare</option> <option value="2">Media Inferiore</option> <option value="3">Media Superiore</option> <option value="4">Laurea Triennale</option> <option value="5">Laurea Successiva</option> </select> </p> <p> <input type="button" id="bottone_ok" value=" OK "/> <input type="reset" id="bottone_reset" value=" reset"/> </p> <p> </p> </form>
Ovviamente un'acquisizione di dati da parte di un'applicazione informatica non ha molto senso se poi l'applicazione non è in grado di elaborarli per produrre risultati significativi perl'utente.
Un documento HTML è un testo ASCII che viene interpretato dal browser.
Perché avvenga l'elaborazione di dati da parte del browser è necessario che il testo HTML,
oltre ai dati, disponibili ad esempio nei campi di un modulo, contenga istruzioni di
elaborazione interpretabili ed eseguibili dal browser.
Queste istruzioni vanno scritte usando un linguaggio di programmazione interpretabile dal browser: i linguaggi più usati sono il Javascript o la sua variante Microsoft JScript.
Come le istruzioni di stile, queste istruzioni possono essere contenute in un'apposito blocco nella sezione <head> del documento e sono delimitate dai marcatori
<script> ... </script>
È comunque preferibile, anche per non appesantire le pagine, scrivere il codice Javascript in un file di testo apposito e salvarlo con estensione .js. In questo caso il codice Javascript viene richiamate nell'apertura del blocco <script> nel seguente modo:
<script src="nomefile.js"> </script>
Qui si forniscono alcune indicazioni sull'uso di Javascript. Per una esposizione più dettagliata vedere Javascript.
Le istruzioni Javascript sono solitamente raggruppate in funzioni dotate di identificatore, argomenti, corpo e possono produrre un valore.
Esempio
function saluto()
{
var nome = document.getElementById("campo_nome").value;
var cognome = document.getElementById("campo_cognome").value;
var c = "Ciao, "+nome+" "+cognome+".";
return c;
}
Le funzioni Javascript possono essere attivate dai seguenti attributi di un tag.
Esempio
<body onload="funzionejs(a,b,c,..)">
Uno dei metodi di uso più frequente per attivare un funzione Javascript è il click del mouse su un bottone.
<input type="button" id="f1" value=" Attiva funzione 1 " onclick="funzione1(a,b,c,..)">
Nell'esempio seguente si riprende il modulo definito sopra modificandolo con l'uso della funzione saluto().
Tre esempi matematici:
Un esempio fatuo: