Il tag form indica l'inizio della costruzione di un modulo. Necessita del tag di chiusura

Transcript

1 LE FORM Le form, note in italiano anche come moduli sono delle strutture che permettono all'utente di inserire dei dati o di effettuare delle scelte. Le form, prese singolarmente non sono nient'altro che delle maschere per l'inserimento di dati possono essere create in una pagina.htm. Perchè diventino interattive è necessario collegarle ad una pagina dinamica (ad esempio.php o.asp) con il compito di prendere i dati inseriti dall'utente e, ad esempio, inserirli in un data base, o effettuare dei controlli (username e pss). In questo corso analizzeremo solo la struttura dei tag necessari per costruire l'interfaccia dei moduli, la parte relativa agli script sarà affrontata nella parte di corso relativa alla costruzione di pagine dinamiche. Tag <form> Il tag form indica l'inizio della costruzione di un modulo. Necessita del tag di chiusura </form> e di una serie di attributi, tra cui: name= nomedellaform Indica il nome (etichetta) che diamo alla form. Il nome non viene visualizzato dal browser ed è completamente trasparente all'utente finale. La necessità di dare un nome alla form (e di seguito a tutti i suoi componenti) si chiarirà quando si costruirà la parte relativa agli script. Per ora limitiamoci a dare un nome sensato, possibilmente in minuscolo e senza spaziature. action= indirizzo.php Contiene il nome del file della pagina dinamica. il contenuto dei dati della form, verranno inviati in posta elettronica (solo tramite il client di posta installato sulla macchina) all'indirizzo indicato method= get/post Indica il metodo con cui vengono inviati i dati dalla form, alla pagina dinamica. Il metodo GET passa direttamente il contenuto dei dati alla pagina dinamica, accondandoli all'indirizzo (lo si può vedere nella barra degli indirizzi) Ad esempio, quando ricerchiamo una parola in un motore di ricerca, una volta premuto il tasto invia, la pagina seguente in generale ha un indirizzo piuttosto complesso. Ad esempio, se ricerchiamo in Google Mario Rossi, la pagina successiva avrà il

2 seguente indirizzo: Il metodo POST consente, invece, di inviare direttamente i dati alla pagina dinamica di destinazione, senza apporli sulla query string. Il metodo POST è ideale per l'implementazione di tutti quei sistemi che prevedono la manipolazione di dati sensibili o in generale una discreta quantità di dati. Pensiamo ad esempio ad un conto-corrente on-line, non ci fa piacere pensare che la nostra password possa essere letta in chiaro da qualsiasi persona vicina al monitor del nostro pc, perchè passata in GET anziché in POST!! ESEMPIO: <form name= prova method= post action= stampa.php >... </form> INPUT all'interno del tag form andranno annidati diversi possibili elementi. Inserimento del testo Per inserire un campo di testo si usa il tag: <input type= text /> E' auto chiuso e non necessita del marcatore di chiusura. Altri attributi per i campi di testo: name= nome Assegna un nome al campo di testo. value= testo Inserisce un testo predefinito nel campo, specificato nel valore dell'attributo Esempio: <input type="text" value="pippo!"/>

3 size= valore Indica al programma utente la larghezza iniziale del campo di testo. Il suo valore si riferisce al numero (intero) di caratteri. <input type="text" size="100" /><br/> <input type="text" size="50" /><br /> <input type="text" size="20" /><br /> maxlength="valore Specifica il numero massimo di caratteri che un utente può immettere. Questo numero può oltrepassare il valore del size specificato, nel qual caso il browser offre un meccanismo di scorrimento. <input type="text" maxlength="50" /> disabled="disabled" Disabilita la possibilità di inserire del testo. Checkbox I checkbox permettono all'utente di spuntare determinate opzioni. <input type="checkbox" /> altri attributi per i checkbox name= valore

4 Assegna un nome al checkbox checked fa in modo che il check sia spuntato di default value= valore Indica il valore che verrà passato alla pagina dinamica, qualora all'invio dei dati il checkbox sia spuntato. Esempio: <input name="prova" type="checkbox" checked> RadioButton Permette all'utente di operare una scelta univoca fra diverse alternative. Per realizzare una lista di radio, si usa il seguente codice: <input type="radio" name="cinema" />Horror<br /> <input type="radio" name="cinema" />Commedia<br /> <input type="radio" name="cinema" />Drammatico<br /> Affinchè la scelta sia esclusiva fra le opzioni indicate è INDISPENSABILE che il valore dell'attributo name delle diverse scelte, sia il medesimo. Altri attributi per i radio button value= valore Indica il valore che verrà passato alla pagina dinamica, relativo al radio selezionato. Il value non ha nulla a che vedere con la parte di testo esterna al tag di input (nell'esempio precedente: Horror, commedia,...), può coincidere o essere completamente diversa. Esempio: <input type="radio" name="cinema" value="horror"/>horror<br /> <input type="radio" name="cinema" value="commedia"/>commedia<br /> <input type="radio" name="cinema" value="drammatico"/>drammatico<br /> In questo esempio, si passerà alla pagina dinamica il valore horror, commedia o drammatico in base alla tipologia di film selezionata <input type="radio" name="cinema" value="1"/>horror<br /> <input type="radio" name="cinema" value="2"/>commedia<br /> <input type="radio" name="cinema" value="3"/>drammatico<br /> In questo altro esempio, si passerà alla pagina dinamica il valore 1, 2 o 3 in base alla

5 tipologia di film selezionata checked="checked" fa in modo che una (e solo una) scelta, sia selezionata di default <input type="radio" name="cinema" value="1" checked="checked"/>horror<br /> <input type="radio" name="cinema" value="2"/>commedia<br /> <input type="radio" name="cinema" value="3"/>drammatico<br /> Inserire un menù a tendina E' possibile creare delle liste di opzione con la struttura del menù a tendina. Il codice del menù a tendina si articola in due parti annidate. il prima parte è costituita dal tag <select>. Indica l'inizio del codice del menù a tendia. Necessita del marcatore di chiusura. In genere ha l'attributo name= nome, che identifica il nome della form da inviare alla pagina dinamica. hidden All'interno del tag <select> andranno inseriti i tag <option>. Ciascuna voce del menù a tendina va inserita tra l'apertura di <option>e la sua chiusura </option>. <option>horror </option> <option>commedia</option> <option>drammatico</option> Ciascuna option potrà avere a sua volta un attributo name= valore, che sarà il valore passato alla pagina dinamica, qualora il valore venga selezionato. <option value= 1 >Horror </option> <option value= 2 >Commedia</option> <option value= 3 >Drammatico</option> selected="selected" attributo di option che permette di selezionare in maniera predefiniti un'opzione. <option value= 1 >Horror </option>

6 <option value= 2 selected="selected">commedia</option> <option value= 3 >Drammatico</option> Textarea Per inserire una parte di testo lungo, su più righe non si usa il tag <input type= text />, ma il tag <textarea>. Necessita del tag di chiusura </textarea> attributi di <textarea> name= valore identificativo del nome attraverso il quel vengono passati i valori di text area alla pagina dinamica. rows= valore indica il numero delle righe della textarea cols= valore indica il numero dei caratteri per ogni riga della textarea. <textarea name="commento" rows="5" cols="20"></textarea> Pulsante di invio (Submit) Permette di inviare alla pagina dinamica (indicata nell'attributo action del tag <form>), i dati raccolti nel modulo. Il codice è il seguente: <input type="submit" value="invia i dati" /> L'attributo value= valore indica il testo indicato sul pulsante. Pulsante di reset Permette di svuotare i valori inseriti nei campi del modulo. <input type="submit" value="invia i dati" />

7 L'attributo value= valore indica il testo indicato sul pulsante. Label Serve per allegare informazioni agli elementi del modulo. Può essere utilizzato per marcare il testo che precede i vari componenti del modulo. Ad esempio: <form name="prova" method="get" action="mailto:mery@acqualiofilizzata.it"> <label>titolo del Film:</label> <input type="text" name="titolo" /> <label>regista:</label><input type="regista" name="regista" /> <label>genere:</label> <option value="horror">horror</option> <option value="commedia">commedia</option> <option value="drammatico">drammatico</option> <input type="submit" value="invia i dati" /> <input type="reset" value="reset" /> </form>