Form e HTML basi
- 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> 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. 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. 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
- 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 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. Fine Lezione Grazie per l'attenzione Prof. Giuseppe Sportelli Www.giuseppesportelli.it Revisione 1.0 Feb2013