I form

Page 1

Il linguaggio HTML i form

Introduzione ai form (X)HTML

L’utilizzo dei form (X)HTML permette una comunicazione diretta degli utenti con le pagine web, attraverso l’inserimento di input richiesti proprio dalla stessa marcatura (X)HTML. I form sono uno degli elementi più versatili del linguaggio (X)HTML e proprio attraverso il loro utilizzo è possibile ottenere, gestire e conservare quelle informazioni importanti trasmesse dagli utenti.

I form (X)HTML non sono altro che delle specifiche interfacce grafiche GUI (Graphical User Interface), inserite nei documenti attraverso la marcatura HTML, che offrono agli utenti quei controlli specifici, necessari all’inserimento dei dati. Gli elementi appartenenti ai form (X)HTML permettono infatti di: inserire parti di testo, selezionare diverse opzioni di scelta da una lista prestabilita, apporre e/o togliere segni di spunta da caselle prestabilite e, in generale, di utilizzare tutti quei comandi o controlli standard ad interfaccia grafica. Tuttavia un form (X)HTML non costituisce solamente un particolare tipo di interfaccia. Infatti un elemento <form>, come vedremo fra

poco, costituisce un mezzo fondamentale per la comunicazione dei dati attraverso le pagine web. Dopo che un input è stato immesso, dei controlli specifici passano le informazioni inserite dall’utente ad un programma specifico, per l’elaborazione dei dati a seconda delle esigenze del sito. Programmi con questa funzione specifica vengono definiti formhandler dal momento che sono preposti alla raccolta e all’elaborazione dei dati provenienti dai form (X)HTML.

La seguente struttura mostra l’aspetto base di un form (X)HTML e il suo relativo output, così come apparirà agli utenti al momento della sua compilazione. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Primo esempio form</title> </head> <body> <form action="formhandler.php" method="post"> <table cellspacing="20"> // Una tabella è stata utilizzata per dare “struttura” all’elemento form di apertura

<tr> <td> // Box di testo // <p> <label for="nome">Nome: </label> // L’elemento label di un form indica la parte di testo che gli utenti visualizzeranno. <input type="text" name="nome" id="nome" size="20"> // L’elemento input indica le diverse tipologie di controllo interne al form <br/> <label for="cognome">Cognome: </label> <input type="text" name="cognome" id="cognome" size="20"> </p> // Area di testo (elemento textarea) // <p><label for="indirizzo">Indirizzo:</label><br/>

<textarea name="indirizzo" id="indirizzo" cols=20 rows=4> </textarea> </p> // Campo Password // <p><label for="password">Password: </label> <input type="password" name="password" id="password" size="20"> </p> </td> <td> // Lista di selezione // <p><label for="prodotti">A quali prodotti è interessato/a? <br/></label> <br/> <select name="prodotti" id="prodotti" multiple="multiple" size="4"> // Di seguito sono riportate le scelte multiple della lista //

<option id="MB">Motherboard <option id="CPU">Processori <option id="Case">Case/Tower<option id="Power">Forniture energetiche <option id="Mem">Memorie<option id="HD">Hard drive<option id="Perif">Periferiche </select> </p> // Utilizzo di una check box // <fieldset> <legend>Contattatemi attraverso: </legend> <p> <input type="checkbox" name="email" id="email" checked> <label for="email">Email</label><br/> <input type="checkbox" name="postal" id="postal"> <label for="postal">Posta</label></p> </fieldset>

</td> </tr> <tr> <td> // Pulsanti radio // <p>Quando pensa di effettuare un acquisto di prodotti hardware/software?</p> <ďŹ eldset> <p> <input type="radio" name="buy" value="subito" id="subito"> <label for="subito">subito</label><br/> <input type="radio" name="buy" value="10" id="buy10"> <label for="buy10">Entro 10 giorni</label><br/> <input type="radio" name="buy" value="30" id="buy30"> <label for="buy30">Entro 1 mese</label><br/> <input type="radio" name="buy" value="mai" id="mai">

<label for="mai">Mai</label> </p> </ďŹ eldset> </td> <td> // Pulsanti di conferma e reset // <p> <input type="submit">    <input type="reset"> </p> <p> <input type="button" name="abbandona" value="Abbandona il sito"> </p> // Immagine del form // <input type="image" name="coupon" src="coupon.gif"> // Campo nascosto // <input type="hidden" name="collegamento" value="Google">

</td> </tr> </table> // Chiusura della tabella interna al form </form> // Chiusura del form </body> </html>

Output

Ora che abbiamo visto una tipica struttura di un form (X)HTML, analizziamo singolarmente le sue componenti principali. Inserire un form (X)HTML Per prima cosa, per inserire un form in un documento (X)HTML è necessario utilizzare l’elemento specifico form che andrà a racchiudere il modulo interamente: <form>… </form>. L’intero form può essere formattato così come ogni altro elemento della marcatura HTML e può essere posizionato o annidato

all’interno di altri tag, capaci di contenere elementi (come ad es. i paragrafi <p>, le tabelle <table>, ecc.) Il tag <form> presenta la seguente struttura minima: <form action="URL a cui inviare i dati" method="get o post"> L’attributo action definisce una URL dove le informazioni inserite dagli utenti verranno ricevute e gestite attraverso uno programma adibito a tale operazione. Sebbene sia possibile inserire una URL qualsiasi, la destinazione dei dati dovrebbe sempre prevedere uno script capace effettivamente di elaborare i dati, a seconda delle finalità per cui il form è stato creato.

Il suffisso .php .indicato nel primo esempio di questa unità indica che i dati del form saranno affidati per la gestione ad uno script realizzato in php. Questo linguaggio di programmazione side-server e opensource viene spesso utilizzato in connessione al web server Apache. E’ possibile tuttavia trovare script realizzati con linguaggi differenti, con la funzione di form-handler. Tra i più utilizzati troviamo: Il suffisso .pl indica che i dati del form saranno processati da uno script Perl. Il suffisso .asp, abbreviazione per Microsoft ASP (Active Server Pages) richiama invece un ambiente di sviluppo specifico per la Microsoft Internet Information Server (IIS).

Infine è possibile trovare il suffisso .jsp, indicante le cosiddette Java Server Pages per la gestione dei dati. I programmi adibiti a queste operazioni verranno comunque considerati piÚ avanti, nel corso della lezione. Il secondo attributo, method, controlla le modalità con cui i dati verranno inviati al programma handler. I due unici valori validi per questo attributo sono: GET e POST. Questi due valori identificano due metodi del protocollo HTTP per il trasferimento dei dati. Tali

metodi servono a indicare l’azione che il cliente richiede al server per il trasferimento dei dati.  Metodo HTTP get Il protocollo HTTP get allega i dati inseriti nel form all’URL attuale, per poi passare le informazioni al programma per la gestione dei dati. Durante la compilazione di un form è infatti possibile notare URL simili alle seguenti: http://www.example.com/forms.cgi?id=45677&data=Carlo

http://www.example.com/forms.php?id=32977&data=Giuseppe http://www.bandname.com/mailinglist.pl?name=Marta%20Rossim& email=rossima%40example.it I dati inseriti nel form compaiono nell’URL dopo il punto interrogativo. Nell’esempio riportato, il campo nome del form è stato compilato con il nome proprio “Marta” e tale dato è stato restituito esattamente attraverso l’URL. Nella maggior parte dei casi il dato “nome” (oppure name, come nell’esempio) corrisponde all’informazione inserita effettivamente nel campo “nome” del form compilato dall’utente.

Tuttavia, dal momento che le informazioni vengono passate attraverso il testo dell’URL, è possibile trasferire i dati anche semplicemente modificando direttamente il testo dell’URL per richiamare il gestore di dati. Per i motivi riportati la modalità di trasferimento GET non è del tutto sicura. Non è infatti opportuno utilizzare questo metodo per il trasferimento di informazioni riservate dal momento che tali dati risulteranno chiaramente visibili attraverso i browser.

 Metodo HTTP post Questo metodo trasferisce i dati codificati attraverso il flusso di dati HTTP. Si tratta di un metodo molto più sicuro per lo spostamento dei dati in rete, dal momento che non è visibile attraverso il semplice utilizzo del browser. Il metodo POST infatti trasferisce i dati nascondendoli agli utenti, solamente il server vedrà le informazioni relative alla richiesta inviata attraverso il form. Tuttavia tale metodo è molto più difficile da utilizzare e da implementare rispetto al precedente.

Altri attributi del tag <form> Il tag <form> prevede ovviamente l’utilizzo opzionale di ulteriori attributi. Nella tabella seguente vengono pertanto riportati gli attributi di maggior utilizzo e utilità rispetto al tag <form>.

Attributi tag <form> Attributi Accept

Valori Una lista contenente le tipologie, separate da una virgola, di server handler accettati.

accept-charset

Enctype Name

Una lista contenente i set di caratteri, separati da virgole, accettati e utilizzati dal form. Indica la tipologia di contenuto dei dati di un form. Indica il nome del form stesso (l’attributo name è tuttavia “deprecato” e viene generalmente sostituito da id).

Gli attributi accept, accept-charset e enctype sono indispensabili ad esempio per la comunicazione e il trasferimento di dati non-testuali e/o di carattere internazionali. L’attributo id (l’ormai deprecato attributo name) dovrebbe essere utilizzato unicamente per identificare

un form specifico all’interno di un documento (X)HTML che può ovviamente contenere più di un modulo. L’elemento label Il tag <label> definisce le "etichette" testuali per i vari campi di un form (X)HTML. Il tag <label> presenta il seguente formato: <label for="nome del tag in questione">Etichetta di testo desiderata </label>

Ad esempio, la seguente struttura parziale definisce l’etichetta per un box di testo destinato a contenere il nome proprio di ogni singolo utente: <p> <label for="nome">Nome: </label> <input type="text" id="nome" value="" size="30" maxlength="40"> </p> L’attributo "for" relativo al tag label permette al browser di associare in maniera adeguata le etichette con i campi.

Box per l’inserimento di testo Uno dei campi di maggior utilizzo dei form (X)HTML è il semplice box o campo di testo. Questo specifico campo permette all’utente di inserire piccole parti di testo: nomi, indirizzi, termini per la ricerca, ecc. Il tag <input>, indica in questo caso il campo di inserimento di testo (attraverso l’attributo type="text") e presenta il seguente formato: <input type="text" name="nome_campo" value="valore_iniziale" size="dimensione_campo" maxlength=“numero_massimo_consentito_di_caratteri”/>

Sebbene gli attributi utilizzati nell’esempio riportato non siano necessari per l’utilizzo di un campo di inserimento di testo, questi rappresentano gli attributi minimi che si dovrebbero sempre utilizzare per meglio specificare l’elemento input di un form.  Scelta delle variabili L’attributo name viene utilizzato in associazione al tag input per identificare il nome scelto per un dato controllo: tale “nome” può essere definito come “variabile”. Nell’esempio seguente, il testo

raggruppato in un elemento textarea, che analizzeremo più avanti, viene identificato dal creatore del form con la variabile “commento”. <textarea name="commento" rows="4" aggiungere un commento?</textarea>

cols="45">Desidera

Quando un utente compila un campo del genere (es. “porteremo un cagnolino di taglia media”), le informazioni inserite verranno trasferite al server come una coppia nome/valore in questo modo: es. commento=porteremo%20un%20cagnolino%20di%20taglia%20media

Per questo motivo gli elementi di controllo di un form dovrebbero sempre contenere un attributo “name” affinchè le informazioni possano essere gestite correttamente. L’unica eccezione a questa regola si presenta durante l’utilizzo dei pulsanti reset e submit dal momento che, come vedremo più avanti, questi hanno già una specifica funzione all’interno del form e non devono essere ulteriormente qualificati. Molto spesso può essere necessario, durante la creazione di un form, l’utilizzo di variabile specifiche, la cui scelta può dipendere dall’handler che gestirà poi i dati; infatti il linguaggio con cui

quest’ultimo è stato elaborato ha già delle proprie variabili a cui il form dovrà fare riferimento, per una gestione corretta delle informazioni. Pertanto è possibile ottenere i nomi delle variabili da utilizzare dallo sviluppatore che ha creato lo script handler, dall’amministratore del sistema, oppure dalle “istruzioni per l’uso” di uno script di base fornito già dal proprio server. Nel caso in cui lo script venga creato dopo il form, sarà bene durante la realizzazione di quest’ultimo utilizzare sempre dei nomi di variabili semplici, brevi, il più possibile significativi e privi di spaziature (è comunque possibile utilizzare gli underscore o i punti per separare i termini).

 Scelta delle dimensioni dei campi e dei valori Il seguente esempio di box di testo è concepito per accettare un nome, con una lunghezza corrispondente a 30 caratteri (size="30)" e concepito per ospitarne al massimo 40 (maxlength="40"). Infine tale box è caratterizzato da nessun valore iniziale specifico (value=""). Es. <p>Nome: <input type="text" name="username" value="" size="30" maxlength="40"/></p> Il seguente codice di esempio definisce invece un campo di testo destinato ad accettare solo un indirizzo email. Tale campo ha una

lunghezza di 40 caratteri (size="30)" ed è stato realizzato per ospitarne solo 40. Infine è dotato di un valore iniziale (attributo value) corrispondente a: email@example.com, a indicare che non saranno accettati nel campo valori diversi dal modello di valore indicato. <p> Email: <input type="text" name="email" value="email@example.com" size="40" maxlength="40"/> </p>

Campo per l’inserimento di password Il campo per l’inserimento di password è simile al box di testo, ma è concepito automaticamente per oscurare i caratteri digitati al suo interno. Tali caratteri verranno visualizzati in automatico attraverso l’utilizzo di simboli appositi (generalmente asterischi). Il seguente esempio mostra un campo password che può accettare fino a 20 caratteri. <p>Password: <input type="password" maxlength="20"/></p>

name="password"

value=""

size="20"

Pulsanti radio I pulsanti radio sono quei bottoni di forma circolare che permettono all’utente di scegliere una determinata opzione tra quelle proposte nel form. I pulsanti radio sono di tipo “esclusivo” dal momento che solo un pulsante tra quelli presenti, indicanti le varie opzioni di scelta, può essere selezionato: quando un pulsante viene selezionato gli altri verranno automaticamente deselezionati.

Il campo relativo ad un pulsante radio presenta il seguente formato: <input type="radio" [checked="checked"]

name="nome_del_gruppo_pulsanti"

value="restituzione_del_valore_se selezionato"/> In questo caso l’attributo value definisce il valore da restituire qualora il pulsante venga selezionato. Tale attributo dovrebbe pertanto essere unico, tra i pulsanti radio appartenenti ad uno stesso gruppo.

Il seguente esempio definisce un gruppo di pulsanti radio che permettono all’utente di selezionare il proprio genere. <html> <head><title>esempio pulsanti radio</title> <style type="text/css"> form {background-color: #00BFFF; } </style> </head> <body> <form> // per il momento non indicheremo la destinazione dei dati e il metodo <p>Genere: <input type="radio" name="genere" value="maschio"> maschio <input type="radio" name="genere" value="femmina"/> femmina</p> </form> </body> </html>

Output

Volendo far apparire un bottone del gruppo come selezionato di default, è possibile aggiungere al tag input l’attributo checked in relazione al pulsante che vogliamo appaia giĂ selezionato. <form> <p>Genere: <input type="radio" name="genere" value="maschio" checked="checked" /> maschio <input type="radio" name="genere" value="femmina" /> femmina</p> </form>

I linguaggi XML e XHTML non permettono, come menzionato, l’utilizzo degli attributi senza valori. Al contrario l’HTML permette anche l’utilizzo di un attributo come ad esempio checked, senza dover necessariamente specificare il suo valore. Tuttavia per una migliore usabilità dei form presenti nelle nostre pagine web è sempre bene specificare anche i valori di default degli attributi che si desidera utilizzare.

Check box Le cosiddette check box rappresentano dei piccoli contenitori vuoti di forma quadrata usati nei form (X)HTML per permettere agli utenti di selezionare allo stesso tempo piÚ di una delle opzioni di scelta. Tali specifici campi di compilazione sono definiti "check" dal momento che, quando selezionati, mostrano un segno di spunta (o piÚ generalmente una X) all’interno del box. Il campo check box presenta il seguente formato:

<input type="checkbox" name="nome_campo" [checked="checked"] value="valore_selezionato"> Esempio di visualizzazione tipica delle checkbox

Come vediamo dall’esempio sopra riportato le check box sono simili per apparenza ai pulsanti radio. L’esempio successivo mostra una check box che permette all’utente di selezionare se aderire o meno ad una mailing list.

<p><input type="checkbox" name="mailinglist" checked="checked" value="aggiungi" /> Aggiungimi alla mailing-list</p>

Output

CosÏ come per i pulsanti radio, l’attributo value viene utilizzato per indicare proprio il valore della check box se selezionata. Qualora non venga indicato alcun valore specifico, la check box selezionata restituirà il valore "aggiungi".

List box Le cosiddette list box vengono utilizzate nei form (X)HTML per permettere agli utenti di scegliere una o più opzioni di testo tra quelle presentate all’interno di una lista. Tale lista può essere presentata nella sua interezza con ogni suo elemento visibile, oppure inserita all’interno di un menù che l’utente può scorrere per effettuare una scelta. Le list box vengono implementate attraverso l’utilizzo dei seguenti tag: <select>, <option> e eventualmente il tag <optgroup>.

Il tag <select> fornisce l’elemento contenitore della lista e presenta il seguente formato: <select name="nome_campo" [multiple="multiple"]>

size="elementi_da_mostrare"

Il tag <option> definisce gli elementi della lista. Ogni elemento viene restituito dal proprio tag <option> Questo tag presenta i seguenti attributi opzionali con i rispettivi valori.

Attributi tag <option> Attributi

Valori

label

Un’etichetta abbreviata per i vari oggetti, utilizzabile dal browser.

selected

Indica un oggetto della lista che apparirà alla prima visualizzazione come già selezionato.

value

Il valore da inviare tramite metodo get o post all’handler qualora l’elemento venga selezionato.

Esempio di <option> tag <option>Lunedi <option>Martedi <option>Mercoledi <option>Giovedi <option>Venerdi <option>Sabato <option>Domenica

E’ possibile dividere in gruppi le varie opzioni di lista. Per far questo è necessario utilizzare il tag <optgroup>. Questo elemento specifico racchiude gli oggetti delle lista che dovrebbero appartenere a uno stesso gruppo, specificato proprio nello stesso tag <optgroup>. Ad esempio la seguente struttura parziale definisce due gruppi distinti per la precedente lista di opzioni relativa ai giorni della settimana: <optgroup label="Weekend"> <option>Sabato <option>Lunedi </optgroup> <optgroup label="Giorni feriali"

<option>Lunedi <option>Martedi <option>Mercoledi <option>Giovedi <option>Venerdi </optgroup> Browser diversi possono visualizzare le opzioni indicate in modi differenti. Tuttavia la visualizzazione di default dovrebbe presentare l’etichetta relative al gruppo di appartenenza immediatamente sopra alle relative opzioni a questa appartenenti.

Combinando i tre elementi visti in relazione alla list box, una struttura tipica può presentarsi nel modo seguente: <html> <head><title>esempio list box</title> <style type="text/css"> form {background-color: #00BFFF; } p { color: white; font-weight: bold; } </style> </head> <body> <form> <p>Selezionare i giorni in cui si desidera essere contattati <select name="giorni" size="5" multiple="multiple">

<optgroup label="Weekend"> <option>Sabato</option> <option>Domenica</option> </optgroup> <optgroup label="giorni feriali"> <option>Lunedi</option> // In HTML è possibile utilizzare solamente il tag di apertura per l’elemento option, tuttavia per questioni di compatibilità è bene utilizzare anche il tag di chiusura </option> <option>Martedi </option> <option>Mercoledi </option> <option>Giovedi </option> <option>Venerdi </option> </optgroup> </select>

</p> </form> </body> </html> Output

Aree di testo Per inserire all’interno di un form delle parti di testo ampie è possibile utilizzare il tag <textarea>. Questo tag può accettare degli input fino a 1,024 caratteri e usa di default una casella di testo multilinea per l’immissione dei dati Il tag <textarea> presenta il seguente formato <textarea name="nome_del_campo" cols="numero di colonne" rows="numero di righe"> </textarea>

L’elemento <textarea> costituisce uno dei pochi tag relativi ai form che utilizza anche in HTML un tag di apertura e un tag di chiusura. Se si desidera che tale campo riporti un determinato testo di default, tale contenuto specifico dovrà essere inserito all’interno dei tag <textarea>…</textarea>. Vediamo ad esempio la seguente struttura: <html> <head><title>esempio textarea</title> <style type="text/css"> form {background-color: #00BFFF; } </style> </head> <body>

<form> <p> <textarea cols="50" rows="6"> Note aggiuntive </textarea> </p> </form> </body> </html> Output

E’ importante notare che il testo inserito nel campo <textarea> si estenderà in accordo alla larghezza del campo. Tuttavia il testo verrà mandato esattamente così com’è stato digitato al form handler. Ad esempio, qualora l’utente inserisca delle spaziature particolari o degli invii, anche questi input verranno inviati all’handler. Al contrario un testo esteso verrà inviato senza interruzioni particolari. Versioni HTML precedenti supportavano un attributo wrap per il tag <textarea>. Questo attributo potrebbe essere utilizzato per controllare il modo con cui il testo si estende nel campo si testo e sotto quale aspetto questo dovrà essere inviato al gestore di dati.

Tuttavia gli attuali browser non supportano adeguatamente questo specifico attributo. File nascosti I campi nascosti possono essere utilizzati in un form (X)HTML per aggiungere dati al form senza renderli visibili agli utenti. Un campo nascosto presenta il seguente formato: <input type="hidden" name="nome_del_campo" value="valore_del_campo"/>

I campi nascosti si comportano esattamente come gli altri campi <input> e vengono generalmente inseriti nei form per localizzare e rintracciare i dati. Ad esempio in una pagina web con diversi form un campo userid può essere nascosto per far si che tutti i form successivi vengano collegati allo stesso utente che li ha compilati. I campi nascosti non vengono visualizzati dal browser ma sono comunque sempre visibili nel codice sorgente del documento (X)HTML.

Bottoni Per aggiungere ulteriori pulsanti con funzione generica in un form (X)HTML è possibile usare il campo bottone (<input type="button">). Questo campo specifico presenta il seguente formato: <input type="button" bottone" />

name="nome_campo"

value="testo_del

Questo tag restituisce attraverso la finestra del browser un pulsante dalla grafica standard.

Esempio di utilizzo di un campo bottone: <input type="button" name="Acquista Adesso!" value="Acquista Adesso!"/>

Output

Tuttavia i “bottoni” da soli sono completamente inutili all’interno di un form. Per avere un bottone con una precisa funzione è necessario collegarlo ad uno script attraverso il metodo onClick oppure tramite un altro attributo.

Ad esempio, il seguente codice restituirà un bottone che quando cliccato, avvierà lo script "buynow". <input type="button" name="acquista_ora" value="Acquista ora!" onClick="JavaScript:buynow('Acquista ora!')"/> Vedremo in dettaglio nel Modulo dedicato al linguaggio JavaScript in che modo sfruttare tale funzionalità.

Immagini E’ possibile migliorare l’aspetto di un form inserendo delle immagini in un apposito campo relativo proprio ai moduli (X)HTML. Il campo immagine presenta il seguente formato: <input type="image" name="nome_campo_immagine" src="URL dell’immagine da inserire" /> Tuttavia come il campo bottone, i campi immagine da soli non forniscono alcun controllo o funzione particolare nel form di cui fanno parte.

Per utilizzare le immagini finalizzate a degli input, queste devono essere collegate ad uno script specifico, come vedremo nella lezione JavaScript dedicata. Il seguente esempio permette, cliccando sull’immagine del form, di avviare un programma specifico, relativo all’acquisto. <input type='"image" name="acquista_ora" onClick="JavaScript:buynow('')"/>

src="immagine.jpg"

Campi file Tali campi permettono all’utente di cercare un determinato file in locale e inviarlo come allegato al form stesso. Questo campo specifico presenta il seguente formato <input type="ďŹ le" name="nome_campo" size="dimensione del campo"/> Il cosiddetto campo file viene visualizzato come una casella di testo con un pulsante che permette all’utente di scorrere i propri file fino a selezionare il documento desiderato.

In alternativa l’utente può sempre digitare il percorso e il nome del file all’interno della text box. Tuttavia per poter controllare questa tipologia di campo in un form (X)HTML è necessario eseguire le seguenti operazioni: ✦Specificare il proprio form come “multipart”, azione che permette di allegare i file. ✦Usare solo il metodo POST per la trasmissione dei dati del form.

Pertanto per un corretto utilizzo di un campo file il tag form di apertura dovrebbe presentare la seguente struttura, con l’aggiunta dell’attributo enctype e il valore “form/multipart”: <form action="form_handler" method="post" enctype="form/multipart"> Pulsanti conferma (submit) e annulla (reset) Questi pulsanti specifici forniscono i meccanismi di controllo necessari agli utenti per inviare correttamente i dati inseriti nel form

all’handler oppure per annullare il form riportandolo al suo stato di default. Questi pulsanti presentano il seguente formato di utilizzo:  Pulsante di conferma (submit) <input type="submit" [value="testo_del_pulsante"] />  Pulsante di annulla (reset) <input type="reset" [value="testo_del_pulsante"] />

L’attributo value per entrambi i tag è opzionale. Qualora tale attributo non venga utilizzato, i pulsanti visualizzeranno di default i termini “submit” e “reset”. Tuttavia in questo caso la visualizzazione finale di tali pulsanti può dipendere dal browser utilizzato. Il pulsante di “conferma”, quando cliccato “attiva” l’effettivo invio dei dati inseriti all’handler specificato nel tag <form>. In alternativa è possibile utilizzare un attributo onClick per richiamare uno script dedicato proprio al trasferimento delle informazioni. Il pulsante di annulla, quando cliccato, provoca l’azzeramento del form e il suo ritorno allo stato originario, al momento della sua prima visualizzazione.

Attributi tabindex e accesskey Gli attributi tabindex e accesskey, dovrebbero sempre essere utilizzati per incrementare il livello di accessibilità dei campi di un form (X)HTML. L’attributo tabindex definisce l’ordine con cui i campi possono essere selezionati dall’utente attraverso l’utilizzo del tasto tab. Questo attributo specifico è accompagnato da un valore numerico che specifica l’ordinamento di un dato campo all’interno della struttura del form.

L’attributo accesskey definisce invece una singola lettera chiave che gli utenti possono utilizzare per accedere direttamente ad alcuni campi del form. Tali chiavi di accesso specificate dagli attributi tabindex e accesskey per essere utilizzate richiedono l’uso congiunto di un comando da tastiera. Ad esempio in ambiente windows sarà necessario utilizzare il tasto alt insieme alla lettera specificata dall’accesskey. In ambiente Mac al contrario bisognerà utilizzare il comando Ctrl. La seguente struttura ad esempio definisce due text box (nome e cognome) che possono essere selezionate direttamente con le lettere “n” e “c”, utilizzando il commando Alt+F (o Ctrl+F). Inoltre il campo

“nome” è il primo campo accessibile del form, attraverso il tasto tab, mentre il “cognome” è il secondo, nell’ordine generale stabilito per i campi del form. <html> <head><title>accesskey e tabindex</title> </head> <body> <form> <p> <label for="Professione">Professione</label> <input type="text" id="professione" size="30"/> <label for="Nome" >Nome</label>

<input type="text" id="Nome" name="nome" tabindex="1" accesskey="n" size="30" maxlength="40" /> <label for="Cognome">Cognome</label> <input type="text" id="Cognome" name="Cognome" tabindex="2" accesskey="c" size="30" maxlength="40" /> </p> </form> </body> </html>

Prevenire i cambiamenti E’ possibile fare in modo che i dati inseriti nel form non possano più essere modificati dall’utente, dopo la loro digitazione nei vari campi. Possiamo utilizzare per questo scopo l’attributo readonly in associazione ai campi di testo per impedire all’utente di cambiare i dati all’interno di questi. L’attributo disabled invece disabilita effettivamente un determinato controllo presente all’interno del form. I controlli disabilitati possono essere visualizzati in modi diversi dai vari browser. Tuttavia generalmente funzioni o pulsanti disabilitati appaiono in grigio chiaro e risultano sbiaditi rispetto ai controlli ancora funzionanti.

La seguente struttura di esempio utilizza l’attributo readonly e l’attributo disabled applicati ai controlli di un unico form (X)HTML. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//IT" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Attributi readonly e disable</title> </head> <body> <form action="formhandler.php" method="post"> <table cellspacing="10" width="600"> // Nel form è stata inserita una tabella (X)HTML <tr> <td width="25%"> <p>Codice cliente (sola lettura): </p>

</td> <td> <input type="text" size="12" value="00146" readonly="readonly"/> </td> </tr> </table> <tr> <td> <p>CAP (disabilitato): </p> </td> <td> <input type="text" size="10" value="" disabled="disabled"/> </td> </tr> </table> </form>

</body> </html>

Output

Il campo a sola lettura (readonly) potrà essere selezionato ma non riempito, mentre il campo disabilitato (disabled) non potrà essere in alcun modo selezionato. Insiemi di campi e legende Nella creazione di un form è possibile creare raggruppamenti specifici dei campi realizzati. Per questa operazione è necessario utilizzare il tag <fieldset> come elemento contenitore di quegli elementi del form che dovranno apparire “graficamente” uniti a formare un gruppo.

L’utilizzo del tag <fieldset> unirà gli elementi al suo interno restituendo nella visualizzazione finale un bordo intorno ai campi scelti come gruppo unico. Vediamo ad esempio la struttura precedente, ampliata e organizzata anche con l’utilizzo dei tag fieldset. <html> <head><title>esempio fieldset</title> <style type="text/css"> form {background-color: #FFFAF0; } p {color: #B22222; }

fieldset {width: 100px; } // è ovviamente possibile applicare regole di stile specifiche per il tag fieldset </style> </head> <body> <form> <p> <label for="Professione">Professione</label> <input type="text id="Professione" size="30"/> <label for="Nome" >Nome</label> <input type="text" id="Nome" name="Nome" tabindex="1" accesskey="n" size="30" maxlength="40"/> <label for="Cognome" accesskey="n">Cognome</label> <input type="text" id="Cognome" name="Cognome" tabindex="2" accesskey="c" size="30" maxlength="40"/> </p> <p>

<fieldset> <p>Genere: <br/> <input type="radio" name="genere" value="maschio"/> Maschio <br/> <input type="radio" name="genere" value="femmina"/> Femmina</p> </fieldset> <fieldset> <p>Stato civile: <br/> <input type="radio" name="stato" value="celibe"/> Celibe <br/> <input type="radio" name="stato" value="nubile"/> Nubile <br/> <input type="radio" name="stato" value="sposato/a"/> Sposato/a <br/> <input type="radio" name="stato" value="vedovo/a"/> Vedovo/a <br/> </p> </fieldset> </form> </body> </html>

Output

Il tag <legend> tag permette di creare una didascalia per il tag fieldset. Ad esempio, il seguente codice può essere applicato alla struttura vista in precedenza proprio per aggiungere una breve legenda ai campi. <html> <head><title>Esempio fieldset e legend</title> <style type="text/css"> form {background-color: #FFFAF0; } p {color: #B22222; } fieldset {width: 100px; } </style>

</head> <body> <form> <p> <label for="Professione">Professione</label> <input type="text id="Professione" size="30"/> <label for="Nome">Nome</label> <input type="text" id="Nome" name="Nome" tabindex="1" accesskey="n" size="30" maxlength="40"/> <label for="Cognome" accesskey="n">Cognome</label> <input type="text" id="Cognome" name="Cognome" tabindex="2" accesskey="c" size="30" maxlength="40"/> </p> <p> <fieldset>

<p> <legend>Genere </legend> <input type="radio" name="genere" value="maschio"/> Maschio <br/> <input type="radio" name="genere" value="femmina"/> Femmina</p> </fieldset> <fieldset> <p> <legend>Stato civile </legend> <input type="radio" name="stato" value="celibe"/> Celibe <br/> <input type="radio" name="stato" value="nubile"/> Nubile <br/> <input type="radio" name="stato" value="sposato/a"/> Sposato/a <br/> <input type="radio" name="stato" value="vedovo/a"/> Vedovo/a <br/> </p> </fieldset> </form>

</body> </html>

Output

E’ importante controllare sempre, durante l’utilizzo del tag <legend> la sua corretta visualizzazione finale attraverso la finestra del browser. In diversi casi è infatti possibile che la “legenda” non appaia in maniera appropriata sopra ai campi di riferimento, a interrompere il “bordo” del fieldset, ma come una normale etichetta di campo.

Script relativi ai form (X)HTML Coma menzionato all’inizio di questa lezione, le informazioni inserite in un dato form verranno automaticamente inviate ad un programma atto alla loro elaborazione e gestione. I cosiddetti form handler svolgono diverse operazioni riguardo ai dati ricevuti attraverso i form: ✦Manipolano e/o verificano i dati ✦Inviano le informazioni via mail ✦Immagazzinano le informazioni in un database

Esistono molti modi per elaborare un form handler ma generalmente vengono utilizzato a questo scopo dei linguaggio di programmazione per creare lo script specifico che servirà all’elaborazione delle informazioni e alla loro conservazione. I più comuni form handler come abbiamo visto vengono creati con i linguaggi PHP, Perl e Python. Il primo parametro da considerare nella creazione e nella scelta di un form-handler è sicuramente la sicurezza. Uno dei primi “form handler”, formmail.cgi, presentava dei punti deboli che permettevano a chiunque di inviare informazioni al programma stesso e di ottenere tramite email le informazioni relative a chiunque altro.

Se si desidera utilizzare un form-handler generico, per il semplice stoccaggio dei dati e per l’invio automatico di email è possibile ottenere tale programma in rete, senza doverlo creare autonomamente. Scaricare un handler Diversi siti web offrono form-handler generici. Tra i piĂš diffusi troviamo: CGI Resource Index, http://cgi.resourceindex.com/. Altri script generici per la gestione dei form (X)HTML sono disponibili in rete, attraverso i seguenti link:

www.scriptarchive.com php.resourceindex.com phpbuilder.com Usare un servizio di script Un’altra soluzione è quella di appoggiarsi per lo stoccaggio dei dati a server e programmi realizzati e gestiti da terzi, senza la necessità di dover creare o scaricare un form handler.

Una lista parziale di tali servizi, presenti in rete, è disponibile sempre al seguente link: http://cgi.resourceindex.com/. Dalla pagina principale, selezionando il collegamento Remotely Hosted è possibile ricercare il servizio di cui si ha bisogno per gestire il proprio form.

FINE LEZIONE

Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.