1. Linguaggio HTML e moduli
Prof. Giuseppe Sportelli
Introduzione ai Form HTML , Linguaggio di Script
lato Client, Applicazione di Stili CSS
2. Il problema
In internet sono presenti
spessi moduli come questo
che richiedono l'inserimento di dati.
Questi dati una volta elaborati sono inviati
Al sito web che propone il modulo.
3. Che cos'è il Form
Un modulo ove l'utente inserisci delle
informazioni
L'utente ha la possibilità di inviare le
informazioni o di cancellarle
Le informazioni possono dopo l'invio avere due
tipi di elaborazioni o entrambe:
Esecuzione programma client javascript, action
script, vbscript
Esecuzione programma server php, asp, perl, c##,
java
4. Tipi di interazioni Form HTML
Ogni modulo HTML può essere utilizzato per:
Inviare un ordine di acquisto
Inviare una e-mail via Web
Inviare Foto su Facebook, Twitter, ecc
Scrivere e inviare un articolo al proprio blog
Eseguire una transazione bancaria
In tutti questi casi le informazioni sono
elaborate dal sito Web e la risposta viene
inviata all'utente
5. Tag <Form>
Il tag per aprire in una pagina HTML un modulo
è il tag <FORM> … </FORM>
All'interno del tag <FORM>
è possibile inserire i controlli di modulo che
sono distinti in:
Caselle di testo e Aree di Testo
Pulsanti di comando Button
Controlli Casella Combinata e Lista per più elemeti
Pulsanti di scelta singola o multipla
Controllo Upload di File
6. Attributi del Tag <FORM>
p
Il tag <FORM> prevede una serie di attributi che sono:
Action ovvero il nome del programma server da eseguire
per esempio programma.php, programma.java
Method che può essere POST o GET, quando l'utente
invia i dati con il GET i dati sono inviati sotto forma di URL
nella barra indirizzi, mentre con il POST sono codificati e
inviati come flusso dati e quindi anche se in chiaro più
sicuro
Target ovvero in quale pagina deve essere aperto la
risposta all'invio
Name il nome del FORM che può essere utilizzato in un
programma per richiamarne il suo contenuto.
7. Tag per i controlli
Tutti i tag di modulo si codificano con <INPUT> che in HTML
non prevede chiusura
La sintassi del Tag <INPUT> è:
<INPUT name=”nome” id=”nome simbolico anche uguale a quello
del name” type=”tipo controllo” value=”testo iniziale”
size=”dimensione”>
In tipo controllo possiamo scegliere: text, button, subchmit,
reset, combobox, listbox, chuneckbox, radio,label e altri,
L'attributo size indica la dimensione in caratteri del controllo,
L'attributo value il valore iniziale del testo del controllo se
controllo testo, o l'etichetta di un pulsante, o di un'etichetta.
L'attributo id identifica un controllo in uno script
8. Un primo modulo in HTML
Scrivere in un documento HTML
Per provare il codice non
<html> Fare copia e incolla
<head>Primo Form</head>
<title> Primo modulo</title>
<body><table>
<form name=”primo”>
<tr><td>Nome</td><td><input id=”nome” type=”text” name=”nome”
value=”digita un testo” size=”30”></td></tr>
<tr><td>Messaggio </td><td><textarea id=”mess” name=”mess”
rows=”3” cols=”30”>Digita Messaggio</textarea></td></tr>
<tr><td><input type=”submit” id=”invia” name=”invia”
value=”invia></td><td><input type=”reset” name=”cancella”
id=”cancella” value=”cancella tutto”></td></tr></table>
</form></body></html>
10. Come costruire l'azione ?
Occorre scrivere un programma in javascript o
vbscript per lato client (in genere per convalida
dell'input ovvero se i dati inseriti sono del giusto
formato)
Oppure scrivere un programma in linguaggio
PHP, Java, ASP da far eseguire sul server
all'invio del modulo
11. Il nostro primo Script
Dopo il tag <HEAD> occorre inserire il tag <SCRIPT> ..
</SCRIPT>
Nel Tag <SCRIPT> è sempre obbligatorio l'attributo
language=JavaScript o Vbscript a seconda del
linguaggio da utilizzare.
Un esempio di script è
<script language="JavaScript">
function saluto (){
alert("ciao "+ nome.value)
return true;};
</script>
12. Come Modificare la pagina Web
Per eseguire il codice Javascript nel tag
<FORM> occorre inserire l'attributo Onsubmit
che permette di dire al Browser che quando
l'utente fa clic su Invia si esegue lo script
In altri termini alla pagina HTML aggiungere
<FORM … Onsubmit=”return saluto()” action=””
method=”post”
Questa modifica consente di eseguire lo script
14. Spiegazione dello Script
<script
Ogni script deve dichiarare un
nome di funzione;
language="JavaScript">
function saluto (){
L'apertura della funzione avviene
con le parentesi graffe;
alert("ciao "+ nome.value)
return true;};
La funzione alert è una finestra di
dialogo che invia il messaggio
</script> ”ciao” più il nome che è stato
inserito nel primo campo del form;
La chiamata return restituisce se lo
script è andato a buon fine il
controllo al Browser;
E' utile notare la chiamata del
controllo <INPUT> viene effettuata
con il nome del suo ID seguito
dall'attributo value.
15. Fine Lezione
Grazie per l'attenzione
Prof. Giuseppe Sportelli
Www.giuseppesportelli.it
Revisione 1.0 Feb2013