Lezione nr. 5 >> Come creare un modulo Web I moduli web sono delle strutture fondamentali per ogni sito web e la loro conoscenza ti permetterà di risolvere almeno il 60% delle problematiche di gestione di un sito. Prima di tutto sai cos è un modulo web? Se non sai rispondere a questa domanda basta che ti ricordi come ti sei iscritto a questo corso. Hai compilato un modulo web inserendo la tua email. Per creare un modulo è necessario avere delle conoscenze di base del linguaggio HTML. Niente di difficile ovviamente! Molto spesso invece di chiamarlo modulo web lo chiamerò semplicemente form. Dopo capirai il perché. In cinque passi anche tu diventerai un maestro nella creazione dei tuoi primi moduli. I Passo: un breve accenno ai tag che devi utilizzare Ogni modulo web è caratterizzaro dal tag html di apertura <FORM> e di chiusura </FORM> NB: Nota la presenza del simbolo / nel tag di chiusura del form (</FORM>) NB: Non c'è differenza tra minuscole e maiscole quindi andrebbe bene anche scritto così <form> </FORm>. E' meglio però avere uno standard :-)) Io utilizzerò sia <FORM> che <form>. Pertanto, se aprissi una pagina web da un sito che presenta all'interno un modulo,cosa ti dovresti aspettare guardando il codice html? Semplice: all interno della pagina, con la funzione trova di Context (vedi video 2 lez. Nr. 001), dovrai cercare il tag <FORM> e vedrai che alla fine del modulo ci sarà anche il tag di chiusura </FORM> PS: In molti browser per vedere il codice HTML delle pagine che si stanno navigando,basta cliccare sulla voce del menu "Visulizza" e selezionare la voce "HTML" oppure "Origine". Copyright www.dcopelli.it 1
inserisco un modulo all interno di una pagina web.... <form> Campi del modulo </form>.. Ovviamente ciò non basta per creare un form funzionante. Due informazione molto importante che mancano sono: 1) Come posso inviare i dati che un ipotetico utente inserisce all'interno del modulo? 2) Chi e come faccio a leggerli o recuperarli una volta inviati? Rispondo in parte a questa domanda perchè il resto lo troverai nelle prossime lezioni. Per poter inviare i dati è necessario inserire,all'interno del tag di apertura <FORM>, queste due informazioni: <form action= http://www.tuosito.com/form/read.asp method="post"> Come vedi ho aggiunto due voci, che in gerco tecnico si chiamano attributi, fondamentali: method= e action=. Il primo dice chi, nel nostro caso quale programma in ASP, deve ricevere i dati inviati dal modulo mentre il secondo informa il programma sulla modalità con cui vengono inviati tali dati. Possiamo dire quindi che l attributo action= rappresenta il cuore di ogni modulo web perché specifica quale sarà il programma che prenderà in gestione i dati che l utente ha inserito e inviato tramite il modulo. Tale programma lo dovrai creare tu. NB: L ordine con cui scrivi i due attributi è indifferente nel senso che prima potresti scrivere l attributo method= e poi action= e viceversa. NB: Ti consiglio sempre di inserire le doppie virgolette. NB: L inserimento dell attributo quindi viene fatto sempre nella forma: nomeattributo=.. Vedrai in seguito quali altri attributi importanti dovrai conoscere per diventare un esperto di gestione dei moduli web. A questo punto non rimane che vedere come inserire i campi! II Passo : inserire i campi all'interno di un modulo Web Nella domanda precedente abbiamo visto come creare e inserire un modulo: 2 Copyright www.dcopelli.it
<form method="post" action="http://www.tuosito.com/form/read.asp"> <!--campi del modulo--> </form> Adesso vediamo come completare la parte interna ai due tag <FORM> e </FORM> ossia come inserire i campi. I campi di un modulo Web I campi che puoi creare all'interno di un modulo sono di 5 tipologie diverse. 1) Campo "TEXT" 2) Campo "CHECKBOX" 3) Campo "RADIO" 4) Campo "TEXTAREA" 5) Campo "SELECT" Ognuno di questi campi ha una precisa funzione e deve essere utilizzato rispettando delle regole, non scritte, ma di buon senso che vedremo nelle lezioni successive. Ma torniamo alla domanda di partenza: come puoi inserire questi campi all'interno del tuo modulo? Bene iniziamo con i primi tre. Copyright www.dcopelli.it 3
a) TAG INPUT Per inserire i primi tre campi, text, checkbox e radio, il trucco consiste nell'utilizzare il tag html <INPUT>. Come? Prendendo l'esempio precedente, basterà inserire il tag <input> in un punto qualsiasi purchè interno ai due tag scritti in precedenza <form> e </form>: <FORM method="post" action="http://www.tuosito.com/form/read.asp"> <input> </FORM> Ma solo il tag <input> non basta a distinguere tra i tre diversi campi text, checkbox e radio. Devo aggiungere un altra voce e precisamente l attributo type=". L inserimento avverrà con le stesse regole viste per gli attributi action e method del tag <form>. Quindi per i tre campi in questione l inserimento dovrà avvenire scrivendo il tag input seguito dall attributo type. Inserimento dei tre campi TEXT,CHECKBOX e RADIO Campo TEXT <input type="text"> Campo CHECKBOX <input type="checkbox"> Campo RADIO <input type="radio"> Semplice non è vero? Esercizio: prova a sostituire al tag <input> scritto nell'esempio precedente, i tag appena elencati e salvalo in un file di testo nominandolo "test.htm". Un possibile esempio : <FORM method="post" action="http://www.tuosito.com/form/read.asp"> Campi del modulo<br> Campo text <input type="text"> <br> Campo check box <input type="checkbox"> <br> Campo radio <input type="radio"> <br> </FORM> Prova ora ad aprire il file che hai creato con un doppio click sopra di esso. Ecco cosa compare. 4 Copyright www.dcopelli.it
NB: Hai visto che, prima di ogni tag <input>, ho inserito dei nomi (etichette) che possono per esempio essere sostituiti con i classici "Cognome", Via, "Telefono" etc. Queste etichette non sono da confondere con l'attributo "name=" che vedremo in seguito. Abbiamo completato di vedere le prime tre tipologie di campi di un modulo Web: il campo "text", "checkbox" e "radio". Ci rimangono le ultime due tipologie che sono il campo TEXTAREA e il campo SELECT: b) TAG TEXTAREA Il campo TEXTAREA serve per dare la possibilità all'utente di inserire più righe di testo all'interno di un form. Il classico esempio è quando vuoi inviare un'email e devi inserire il messaggio, in generale costituito da più righe. Vediamo allora come si inserisce un campo TEXTAREA. Innanzitutto devi scrivere il tag <TEXTAREA> e il tag di chiusura </TEXTAREA> <TEXTAREA cols="" rows=""></textarea> Come avrai notato si sono aggiunti due attributi importanti: cols = valore specifica il numero di colonne ossia la larghezza del campo (espressa in caratteri) rows = valore specifica il numero di righe ossia la lunghezza del campo inserisco un campo textarea largo 60 caratteri e lungo 7 righe. <FORM method="post" action="http://www.tuosito.com/form/read.asp"> <TEXTAREA cols="60" rows="7"> </TEXTAREA> </FORM> NB: Deve essere inserito sempre il tag di chiusura </TEXTAREA> NB: Tale tag può essere inserito anche su una nuova riga NB: Anche qui non ha importanza che tu utilizzi le minuscole o le maiuscole c) TAG SELECT Il campo SELECT serve per dare la possibilità all'utente di scegliere tra un insieme di possibili Copyright www.dcopelli.it 5
voci per uno stesso campo. Il classico esempio è quando vi vien chiesto di inserire la provincia della vostra città da un elenco di provincie. Come è possibile inserire tale elenco? Bene ci sono due passi: il primo consiste nell'inserire il tag di apertura <SELECT> e il tag di chiusura </SELECT> <SELECT></SELECT> NB: Devi inserire sempre il tag di chiusura </select> Il secondo passo consiste nell'inserire le opzioni che rendo disponibili al mio navigatore, utilizzando il tag html <option>voce</option> <SELECT> <option>pd</option> <option>mi</option> <option>to</option> <option>na</option> </SELECT> dove al posto di "Voce" ho sostituito rispettivamente PD,MI,TO,NA. NB: Non c'è limite al numero di voci che puoi inserire. Dopo queste nozioni sei quasi in grado di creare il tuo primo form. Manca solo un'ultima cosa ma prima di vederla facciamo un pò di ripasso, con le prossime domande. >> A cosa serve l'attributo method= del tag <FORM>? L'attributo method= del tag <FORM>, serve per indicare al programma che elaborerà i dati che l'utente invia tramite un modulo su una pagina web del tuo sito, la modalità con cui verranno inviati i campi. I due possibili valori sono: POST e GET. a) <FORM method="post" action="http://www.tuosito.com/form/read.asp"> b) <FORM method="get" action="http://www.tuosito.com/form/read.asp"> Nel caso a) i dati vengono inviati al programma senza limiti di dimensione, e viene usato in generale perchè offre maggiore sicurezza se l'utente sta inviando dati privati come nome e cognome o una password che potranno essere poi memorizzati su un database. In generale è da preferire il metodo a). Il metodo GET viene usato in casi particolari che vedremo in seguito. Giusto per sapere cosa succede se utilizzi b), i dati che inserisci all'interno dei vari campi del modulo, nel momento stesso in cui li invii cliccando sul bottone invia, verranno mostrati nella barra degli indirizzi del tuo browser nella forma: http://www.tuosito.com/form/read.asp?nome=ciccio&cognome=pasticcio&tel=33939393 6 Copyright www.dcopelli.it
In questo modo se un utente va a vedersi i siti che hai navigato nel tuo browser, potrà trovare questa stringa e potrà risalire al tuo numero di telefono leggendolo semplicemente dalla lista. >> A cosa serve l'attributo "action=" del tag <FORM>? <FORM method="post" action="http://www.tuosito.com/form/read.asp"> L'attributo "action=" è uno dei parametri più importanti del tag <FORM> perchè ti permette di definire quale sarà il programma che riceverà i dati inviati tramite in tuo modulo web. Ovviamente tale programma lo devi creare tu (qui sta il bello e vedremo come crearlo più avanti!) e deve risiedere in generale sul server dove hai memorizzato il tuo sito web. <FORM method="post" action="http://www.tuosito.com/form/read.asp"> dove read.asp e' l'applicazione che hai creato e memorizzato all'interno della cartella form del tuo sito web. NB: sei libero di inserire il tuo programma all'interno di una cartella qualsiasi e dargli il nome che vuoi, purchè ovviamente sia un programma scritto in ASP! NB: L'indirizzo dove risiede il programma che riceverà i dati puoi anche inserirlo senza fare riferimento all'indirizzo assoluto, ossia senza utilizzare "http://www.tuosito.com", a patto che utilizzi un indirizzamento relativo corretto rispetto alla posizione in cui è stata memorizzata la pagina web che contiene il form. <FORM method="post" action="../form/read.asp"> In questo caso invio i dati all'applicazione (read.asp) che rispetto alla pagina, che contiene il modulo web, si trova sopra di una directory (../) e all'interno della cartella form (form/). Io ti consiglio comunque di utilizzare l'indirizzamento assoluto per evitare errori, soprattutto all'inizio. >> A cosa serve l'attributo "type=" del tag <INPUT>? L'attributo "type=" del tag <INPUT> ti permette di specificare 3 delle 5 tipologie di campo che puoi inserire all'interno di un modulo web. Per il tag <INPUT> esistono quindi tre tipologie: 1) Campo TEXT Questo campo viene usato in generale per permettere all'utente di inserire dati quali nome, cognome, email, telefono, indirizzo etc cioè dati di lunghezza limitata, in generale 0/60 caratteri. Tale campo può permettere di inserire quindi una sola riga. Per più righe devi usare <TEXTAREA> Nome: <INPUT type="text"> Copyright www.dcopelli.it 7
2) Campo CHECKBOX Questo campo, (rappresentato da un piccolo quadratino), viene usato per permettere all'utente di selezionare contemporaneamente più voci per uno stesso campo come, per esempio, quando vuoi dare la possibilità di indicare quali sport pratica il tuo navigatore. L'utente quindi ha la possibilità di effettuare una scelta multipla. Quali sport pratichi? Calcio: <INPUT type="checkbox"> Sci: <INPUT type="checkbox"> Tennis: <INPUT type="checkbox"> 3) Campo RADIO Questo campo, (rappresentato da un piccolo cerchio), viene usato per permettere all'utente di effetturare una scelta mutuamente esclusiva tra una serie di voci, come per esempio "Si'" o "No" oppure "da 20 a 30", "da 30 a 50" etc. L'utente può selezionare una voce o un'altra ma non insieme come per il campo checkbox. Ti piace il Calcio? Si' <INPUT type="radio"> No <INPUT type="radio"> >> A cosa servono gli attributi "cols=" e "rows=" del tag <TEXTAREA>? Messaggio della tua email: <TEXTAREA cols="30" rows="5"></textarea> L'attributo "cols=" specifica la larghezza max del campo in termini di numero di caratteri. Es. cols="30" indica che la larghezza del campo è di 30 caratteri. L'attributo "rows=" specifica il numero di righe max del campo. Es. rows="5" indica che il numero di righe visibile è 5. NB: se all'interno del campo textarea inserisci più del numero max di caratteri o se inserisci più del numero di righe visibili cosa succede? In automatico, se si eccede nel numero max di caratteri, l'inserimento prosegue andando a capo di una riga e se eccede il numero max di righe, allora compare una barra di scorrimento laterale che permette di vedere tutte le righe. >> A cosa serve il tag <OPTION> del campo <SELECT>? Seleziona la provincia: <SELECT> <option>pd</option> <option>mi</option> <option>to</option> <option>na</option> </SELECT> 8 Copyright www.dcopelli.it
Il tag "option" del campo SELECT permette di specificare la lista di voci che si vuole fornire all'utente. Da questa lista l'utente può selezionare una voce, semplicemente scorrento tra l'elenco con il proprio mouse. Nel nostro esempio, l'utente ha la possibilità di selezionare la provincia tra un elenco di 4 provincie (PD,MI,TO,NA). NB: Ogni voce, deve essere inserita all'interno dei due tag <OPTION> e </OPTION> e questi due tag devono essere inseriti all'interno degli altri due tag <SELECT></SELECT> Sono sicuro che sei bramoso di sapere come poter recuperare i dati di questi campi. Vedremo nelle prossime lezioni come fare. Per adesso buona programmazione Davide Copelli Copyright www.dcopelli.it 9