Post on 06-Apr-2016
description
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 form-
handler 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>
<fieldset>
<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>
</fieldset>
</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 open-
source 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 Valori
Accept Una lista contenente le tipologie, separate
da una virgola, di server handler accettati.
accept-charset Una lista contenente i set di caratteri,
separati da virgole, accettati e utilizzati dal
form.
Enctype Indica la tipologia di contenuto dei dati di
un form.
Name 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" cols="45">Desidera
aggiungere un commento?</textarea>
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" name="password" value="" size="20"
maxlength="20"/></p>
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" name="nome_del_gruppo_pulsanti"
[checked="checked"]
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" size="elementi_da_mostrare"
[multiple="multiple"]>
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" name="nome_campo" value="testo_del
bottone" />
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" src="immagine.jpg"
onClick="JavaScript:buynow('')"/>
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="file" 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