Linguaggio HTML e moduli

Prof. Giuseppe Sportelli
Introduzione ai Form HTML , Linguaggio di Script
lato Client, Applicaz...
Il problema
In internet sono presenti
spessi moduli come questo
che richiedono l'inserimento di dati.
Questi dati una volt...
Che cos'è il Form

Un modulo ove l'utente inserisci delle
informazioni

L'utente ha la possibilità di inviare le
informa...
Tipi di interazioni Form HTML

Ogni modulo HTML può essere utilizzato per:

Inviare un ordine di acquisto

Inviare una ...
Tag <Form>

Il tag per aprire in una pagina HTML un modulo
è il tag <FORM> … </FORM>
All'interno del tag <FORM>
è possibi...
Attributi del Tag <FORM>
Il tag <FORM> prevede una serie di attributi che sono:

Action ovvero il nome del programma serv...
Tag per i controlli

Tutti i tag di modulo si codificano con <INPUT> che in HTML
non prevede chiusura
La sintassi del Tag...
Un primo modulo in HTML
Scrivere in un documento HTML
<html>
<head>Primo Form</head>
<title> Primo modulo</title>
<body><t...
Guardiamo il risultato !
Come costruire l'azione ?

Occorre scrivere un programma in javascript o
vbscript per lato client (in genere per convalid...
Il nostro primo Script
Dopo il tag <HEAD> occorre inserire il tag <SCRIPT> ..
</SCRIPT>
Nel Tag <SCRIPT> è sempre obbligat...
Come Modificare la pagina Web
Per eseguire il codice Javascript nel tag
<FORM> occorre inserire l'attributo Onsubmit
che p...
Esecuzione Script
Spiegazione dello Script
<script
language="JavaScript">
function saluto (){
alert("ciao "+ nome.value)
return true;};
</sc...
Fine Lezione
Grazie per l'attenzione
Prof. Giuseppe Sportelli
Www.giuseppesportelli.it
Revisione 1.0 Feb2013
Upcoming SlideShare
Loading in …5
×

Form e HTML basi

797 views

Published on

Lezione sui form html

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

  • Be the first to like this

No Downloads
Views
Total views
797
On SlideShare
0
From Embeds
0
Number of Embeds
246
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Form e HTML basi

  1. 1. Linguaggio HTML e moduli  Prof. Giuseppe Sportelli Introduzione ai Form HTML , Linguaggio di Script lato Client, Applicazione di Stili CSS
  2. 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. 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. 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. 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. 6. Attributi del Tag <FORM> 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. p
  7. 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, checkbox, 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. 8. Un primo modulo in HTML Scrivere in un documento HTML <html> <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> Per provare il codice non Fare copia e incolla
  9. 9. Guardiamo il risultato !
  10. 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. 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. 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
  13. 13. Esecuzione Script
  14. 14. Spiegazione dello Script <script language="JavaScript"> function saluto (){ alert("ciao "+ nome.value) return true;}; </script>  Ogni script deve dichiarare un nome di funzione;  L'apertura della funzione avviene con le parentesi graffe;  La funzione alert è una finestra di dialogo che invia il messaggio ”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. 15. Fine Lezione Grazie per l'attenzione Prof. Giuseppe Sportelli Www.giuseppesportelli.it Revisione 1.0 Feb2013

×