I form

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 protected], a indicare che non saranno accettati nel campo

valori diversi dal modello di valore indicato.

<p>

Email:

<input type="text" name="email" value="[email protected]"

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>



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>

</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>


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>


<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>



</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>


form {background-color: #FFFAF0; }

p {color: #B22222; }

fieldset {width: 100px; }

</style>

</head>

<body>

<form>

<p>


<input type="text id="Professione" size="30"/>

<label for="Nome">Nome</label>

<input type="text" id="Nome" name="Nome" tabindex="1" accesskey="n"


<label for="Cognome" accesskey="n">Cognome</label>



</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:

http://cgi.resourceindex.com/

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

I form

Documents

Transcript of I form