• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML Form
 

HTML Form

on

  • 331 views

 

Statistics

Views

Total Views
331
Views on SlideShare
320
Embed Views
11

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 11

http://elearning.itaca-project.eu 11

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML Form HTML Form Presentation Transcript

    • Linguaggio HTML e moduli Prof. Giuseppe SportelliIntroduzione ai Form HTML , Linguaggio di Script lato Client, Applicazione di Stili CSS
    • 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.
    • 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
    • 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
    • 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
    • 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.
    • 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
    • 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>
    • Guardiamo il risultato !
    • 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
    • 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>
    • 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
    • Esecuzione Script
    • 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.
    • Fine Lezione Grazie per lattenzioneProf. Giuseppe SportelliWww.giuseppesportelli.itRevisione 1.0 Feb2013