Linguaggio HTML e moduli    Prof. Giuseppe SportelliIntroduzione ai Form HTML , Linguaggio di Script  lato Client, Applic...
Il problemaIn internet sono presentispessi moduli come questoche richiedono linserimento di dati.Questi dati una volta ela...
Che cosè il Form    Un modulo ove lutente inserisci delle    informazioni    Lutente ha la possibilità di inviare le    ...
Tipi di interazioni Form HTML    Ogni modulo HTML può essere utilizzato per:            Inviare un ordine di acquisto   ...
Tag <Form>    Il tag per aprire in una pagina HTML un modulo    è il tag <FORM> … </FORM>Allinterno del tag <FORM>  è pos...
Attributi del Tag <FORM>               pIl tag <FORM> prevede una serie di attributi che sono:    Action ovvero il nome d...
Tag per i controlli    Tutti i tag di modulo si codificano con <INPUT> che in HTML    non prevede chiusuraLa sintassi del...
Un primo modulo in HTMLScrivere in un documento HTML                                                 Per provare il codice...
Guardiamo il risultato !
Come costruire lazione ?    Occorre scrivere un programma in javascript o    vbscript per lato client (in genere per conv...
Il nostro primo ScriptDopo il tag <HEAD> occorre inserire il tag <SCRIPT> .. </SCRIPT>Nel Tag <SCRIPT> è sempre obbligator...
Come Modificare la pagina WebPer eseguire il codice Javascript nel tag <FORM> occorre inserire lattributo Onsubmit che per...
Esecuzione Script
Spiegazione dello Script<script                                                           Ogni script deve dichiarare un ...
Fine Lezione Grazie per lattenzioneProf. Giuseppe SportelliWww.giuseppesportelli.itRevisione 1.0 Feb2013
Upcoming SlideShare
Loading in …5
×

HTML Form

564 views

Published on

Published in: Lifestyle
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
564
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML Form

  1. 1. Linguaggio HTML e moduli Prof. Giuseppe SportelliIntroduzione ai Form HTML , Linguaggio di Script lato Client, Applicazione di Stili CSS
  2. 2. Il problemaIn internet sono presentispessi moduli come questoche richiedono linserimento di dati.Questi dati una volta elaborati sono inviatiAl sito web che propone il modulo.
  3. 3. Che cosè il Form Un modulo ove lutente inserisci delle informazioni Lutente ha la possibilità di inviare le informazioni o di cancellarle Le informazioni possono dopo linvio avere due tipi di elaborazioni o entrambe:  Esecuzione programma client javascript, action script, vbscript  Esecuzione programma server php, asp, perl, c##, java
  4. 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 allutente
  5. 5. Tag <Form> Il tag per aprire in una pagina HTML un modulo è il tag <FORM> … </FORM>Allinterno 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. 6. Attributi del Tag <FORM> pIl 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 lutente 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 allinvio Name il nome del FORM che può essere utilizzato in un programma per richiamarne il suo contenuto.
  7. 7. Tag per i controlli Tutti i tag di modulo si codificano con <INPUT> che in HTML non prevede chiusuraLa 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,Lattributo size indica la dimensione in caratteri del controllo, Lattributo value il valore iniziale del testo del controllo se controllo testo, o letichetta di un pulsante, o di unetichetta. Lattributo id identifica un controllo in uno script
  8. 8. Un primo modulo in HTMLScrivere 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>
  9. 9. Guardiamo il risultato !
  10. 10. Come costruire lazione ? Occorre scrivere un programma in javascript o vbscript per lato client (in genere per convalida dellinput ovvero se i dati inseriti sono del giusto formato) Oppure scrivere un programma in linguaggio PHP, Java, ASP da far eseguire sul server allinvio del modulo
  11. 11. Il nostro primo ScriptDopo il tag <HEAD> occorre inserire il tag <SCRIPT> .. </SCRIPT>Nel Tag <SCRIPT> è sempre obbligatorio lattributo 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. 12. Come Modificare la pagina WebPer eseguire il codice Javascript nel tag <FORM> occorre inserire lattributo Onsubmit che permette di dire al Browser che quando lutente 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
  13. 13. Esecuzione Script
  14. 14. Spiegazione dello Script<script  Ogni script deve dichiarare un nome di funzione; language="JavaScript"> function saluto (){  Lapertura 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 dallattributo value.
  15. 15. Fine Lezione Grazie per lattenzioneProf. Giuseppe SportelliWww.giuseppesportelli.itRevisione 1.0 Feb2013

×