Premessa Con i FORMS (moduli) l'utente può interagire con il sito spedendo un proprio commento, avanzando richieste senza necessità di scrivere via e-mail,

Presentazione sul tema: "Premessa Con i FORMS (moduli) l'utente può interagire con il sito spedendo un proprio commento, avanzando richieste senza necessità di scrivere via e-mail,"— Transcript della presentazione:

1 Premessa Con i FORMS (moduli) l'utente può interagire con il sito spedendo un proprio commento, avanzando richieste senza necessità di scrivere via e-mail, firmando guestbook, rispondendo a sondaggi e così via. Forms Tutto questo è possibile solo grazie all'intervento di programmi residenti su server, che prendono il nome di CGI (Common Gateway Interface), o di pagine ASP (Active Server Pages). Quindi la gestione dei moduli dipende in misura preponderante dal server, piuttosto che dalla programmazione HTML.

2 Premessa La creazione di un modulo consta di due fasi:  impostazione dei tag per la creazione del modulo, dei campi e del tasto di spedizione;  creazione di uno script CGI o di una pagina ASP sul server (o richiamo di uno script già impostato). Forms

3 Il tag FORM Forms I tag che racchiudono i form sono: Non è possibile inserire un modulo all'interno di un altro. In altre parole i form non permettono nidificazioni. La sintassi usuale del tag è la seguente: Esempi di action nel caso di uso di script CGI o di pagine ASP: action=" http://www.tuosito.com/cgi-bin/nome-script.cgi " http://www.tuosito.com/cgi-bin/nome-script.cgi action="scrivi-record.asp"

4 Il tag FORM Forms Se method è impostato come get i dati del modulo vengono spediti al server e separati in due variabili; il numero massimo di caratteri contenuti nel form può essere di solo 255. Utilizzando "method=post" i dati vengono ricevuti direttamente dallo script sul server senza un preventivo processo di decodifica. Questa caratteristica fa sì che lo script possa leggere una quantità illimitata di caratteri.

5 Il tag FORM Forms E' comunque possibile utilizzare i form in altri modi: per mandare un e-mail con il contenuto del form, e in questo il method sarà POST e l'action sarà: action="mailto:nome@provider.it" oppure come aree attive per script attivi sul cliente (es. per realizzare una calcolatrice funzionante sulla pagina del cliente in javascript): in questo caso action mancherà.

6 Gli elementi di un FORM Forms Il tag di base per la definizione degli elementi di un form è, che viene utilizzato per aggiungere pulsanti, menu di scelta, password ecc.; gli possono essere di 8 tipi differenti: TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT, RESET, BUTTON, IMAGE, HIDDEN Gli altri due tag sono e.

7 Gli elementi di un FORM Forms type="TEXT" esempio: Questo valore crea i tipici campi di testo, dove usualmente vengono richiesti dati quali il nome o l'indirizzo e-mail. È un valore usato soprattutto per informazioni non predefinite che variano di volta in volta. TEXT ha tre attributi aggiuntivi: maxlength (il numero massimo di caratteri inseribili nel campo, oltre il quale non è possibile aggiungere), size (la larghezza della stringa all'interno della pagina) e value (visualizza un testo di default all'interno della stringa).

8 Gli elementi di un FORM Forms type="PASSWORD". esempio: Questo campo funziona come TEXT, ma quando si digita all'interno della stringa bianca, non appaiono le lettere ma i classici asterischi delle password.

9 Gli elementi di un FORM Forms type="CHECKBOX" esempio: Questo attributo viene solitamente utilizzato per informazioni del tipo "si/no" e "vero/falso". Crea delle piccole caselle quadrate da spuntare o da lasciare in bianco. Se la casella è sputanta input restituisce un valore, al contrario non restituisce alcun valore. Value impostato su "yes" significa che di default la casella è spuntata. In JavaScript Checked controlla lo stato iniziale della casella, all'atto del caricamento della pagina.

10 Gli elementi di un FORM Forms type="RADIO" esempio: Questo attributo ha funzioni simili a quello visto in precedenza, ma presenta più scelte possibili. Selezionando una voce tra quelle presenti, qualora abbiano tutte valore "name" identico, si deselezionano automaticamente le altre.

11 Gli elementi di un FORM Forms type="SUBMIT" esempio: Il classico bottone che invia il form con tutti i suoi contenuti. La grandezza del bottone dipende dalla lunghezza del testo.

12 Gli elementi di un FORM Forms type="RESET" esempio: Bottone che reimposta l'intero form eliminando i dati inseriti.

13 Gli elementi di un FORM Forms type="BUTTON" esempio: Bottone generico che viene di solito utilizzato per attivare eventi (onClick, ad esempio) da gestire con un linguaggio di scripting.

14 Gli elementi di un FORM Forms type="IMAGE" esempio: Funzione simile a quella del tasto "SUBMIT" ma con la differenza che al posto del bottone di default, viene visualizzata un'immagine.

15 Gli elementi di un FORM Forms type="HIDDEN" esempio: Un ulteriore possibilità è quella di aggiungere un campo "nascosto". In questo modo è possibile aggiungere ai dati "mandati" con il form uno o più valori non modificabili.

16 Gli elementi di un FORM Forms TEXTAREA Esempio: Textarea è utilizzato per commenti o campi che prevedono l'inserimento di molto testo. La larghezza è impostata da "cols" e l'altezza da "rows". WRAP="physical" stabilisce che qualora il testo inserito superi la larghezza della finestra, venga automaticamente riportato a capo.

17 Gli elementi di un FORM Forms SELECT Esempio: Buono Sufficiente Ottimo Select è un elemento che permette la creazione di elenchi a discesa con varie possibilità di scelta.

18 JavaScript e i FORM Forms Con JavaScript è possibile interagire con i FORM. Un tipico uso è quello del controllo dei dati immessi. Gli eventi collegati specificamente ai Form: onReset onSubmit che vengono attivati dai bottoni Submit e Reset. Ad esempio: La funzione controlla() intercetta il submit che viene attivato solo se la funzione restituisce un valore True.

19 JavaScript e i FORM Forms In JavaScript è possibile riferirci al contenuto dei campi di Input di un Form utilizzandone il nome e la proprietà value; ad esempio: var c = cognome.value; var l = cognome.value.length; si attribuisce alla variabile c la stringa contenuta nel campo di input "cognome" e alla variabile l la sua lunghezza. I nomi completi dei campi sono: document.nomeform.nomecampoinput.... Per i bottoni CheckBox e Radio viene usata la proprietà checked. Per i bottoni Radio il value assunto è quello del bottone che è checked.

20 Uso dei FORM per l'e-mail Forms E' possibile utilizzare una form per mandare una e-mail, senza utilizzare programmi residenti sul server, con un'intestazione simile alla seguente: Dove a "nome@provider.it" va sostituito l'indirizzo e-mail, verso il quale devono essere indirizzati i moduli compilati. Il contenuto del form non viene però formattato ottenendo però un risultato "strano", come il seguente: Nome=Massimiliano+Valente&E- mail=webmaster@html.it&citta%27=Roma&eta%25 Con alcuni programmi di posta è però possibile ottenere risultati migliori, aggiungendo nel tag ENCTYPE="text/plain".

21 Uso dei FORM per i CGI Forms Nella maggior parte dei casi i form prevedono l'uso di un CGI residente su server. Vediamone alcuni esempi.  Acquisto di un servizio hosting con accesso alla directory CGI-BIN. Se si acquista uno spazio in hosting presso uno dei tanti fornitori di tali servizi, è bene chiedere se il pacchetto prevede l'accesso alla directory CGI-BIN. Se la risposta è affermativa è possibile realizzare un programma CGI o scaricarne uno freeware o shareware, impostarlo ed usarlo secondo le proprie esigenze. Quando si sceglie un CGI si deve fare attenzione alla piattaforma per la quale è stato creato: Unix o Windows NT.

22 Uso dei FORM per i CGI Forms  Sottoscrizione di uno spazio Web presso una delle comunità free-Web space. A tutt'oggi sono moltissime le comunità virtuali che offrono spazio gratuitamente, sia in lingua inglese che in lingua italiana. Tali servizi non si limitano più al solo spazio e accesso FTP, ma prevedono numerosi servizi supplementari, tra i quali non manca mai un form per guestbook e mail.

23 Uso dei FORM per i CGI Forms  Acquisto di un servizio hosting che non consente l'accesso alla directory CGI-BIN, o poca fiducia nei servizi forniti dalle comunità virtuali. In questi casi la soluzione migliore consiste nel rivolgersi ad un servizio gratuito di moduli residenti su altro server (quindi che non vanno impostati sul proprio) e disponibili previa sottoscrizione. Rivolgersi ad un servizio terzo separa l'uso dei moduli da quello del server, col vantaggio, nel caso in cui si cambi server o comunità, di non dover reimpostare il tutto.