I moduli HTML - Maurizio Gambino.it

Transcript

Interazione con l'utente – I moduli.
Argomenti trattati:
- Premessa:
Cosa sono e perchè rappresentano la parte più importante della comunicazione in
Rete.
- I tipi di campi:
Come realizzare e gestire i vari tipi di campi in un form HTML.
- Il controllo sui moduli – moduli disabilitati:
Come controllare focus e contenuto dei vari tipi di campi di un form HTML.
Premessa
Il modulo, con i relativi campi, rappresenta forse la parte più importante del codice HTML
in quanto permette l'interazione con l'utente, quindi lo scambio di informazioni, che è la
vera essenza dell'esistenza di Internet: senza comunicazione non ha senso il web.
I moduli, oggetti nelle pagine web che permettono l'immissione di testo o di selezionare
informazioni precaricate, rappresentano il mezzo di comunicazione con cui noi
programmatori del web riusciamo a dare gli strumenti necessari a tutti coloro che
usufruiscono del WWW di scambiarsi informazioni; questa motivazione ha permesso lo
sviluppo di altri linguaggi di programmazione, lato server quali ASP, PHP e JSP, che
permettono di elaborare e gestire i dati inseriti tramite moduli.
Il tag che funge da "contenitore" per inserire uno o più moduli in un ipertesto è <FORM>, i
cui due attributi principali sono ACTION="URL del file", che indica a quale script il
modulo invierà i dati, e METHOD="get/post" che indica il metodo utilizzato nella
trasmissione dei dati al server; da qui in avanti utilizzeremo solo il valore "post", in seguito
spiegheremo quando utilizzare il valore "get".
Anticipiamo solo che la scelta è dovuta principalmente a motivi di sicurezza.
Adesso trattiamo la dichiarazione dei singoli moduli, che da questo momento in poi
chiameremo campi: la maggior parte di loro richiede il tag <INPUT> seguito dai relativi
attributi necessari per la corretta impostazione del campo.
L'attributo TYPE="tipo di campo" permette, tramite valore racchiuso tra virgolette, di
definire i singoli tipi di campo, ognuno dei quali ha altri attributi che variano a seconda
dell'esigenza dei moduli stessi.
Vediamo adesso di seguito i diversi valori che si possono assegnare all'attributo TYPE ed
agli altri.
Il linguaggio HTML - prof. Maurizio Gambino | 10 I moduli: interazione con l'utente.
I tipi di campi
Il campo di tipo TEXT
Per inserire nel nostro modulo un campo destinato ad acquisire una riga di testo (il nome
di una persona, il suo indirizzo, l'età, ecc.) assegneremo, appunto, all'attributo TYPE il
valore TEXT, seguito dall'attributo NAME per dare una necessaria etichetta al nostro
campo, che in seguito ci sarà molto utile nell'elaborazione dei nostri dati, e dall'attributo
SIZE, che definirà la larghezza del nostro campo.
Un esempio è:
<form method="post" action="percorso/script.php">
Inserisci il tuo nome: <input type=TEXT name="NOME" size="25">
...
</form>
In questo caso otteniamo un campo chiamato NOME di larghezza 25 caratteri.
Il campo di tipo RADIO Buttons
Adesso trattiamo i campi che permettono la scelta di un singolo valore tra diversi e che,
per la loro forma arrotondata, ricordano i vecchi pulsanti delle radio destinati, in passato, a
pre-sintonizzare le stazioni radio di maggior gradimento., e per questo denominati Radio
Buttons; definiti anch'essi dal tag INPUT.
Per realizzarli é sufficiente assegnare all'attributo TYPE il valore RADIO, seguito,
dall'attributo NAME, il quale valore deve essere uguale per tutti i campi di questo tipo
utilizzati nel modulo, ed infine utilizzare un attributo chiamato VALUE, il cui valore verrà
acquisito dal modulo al momento della scelta.
Vediamo un esempio chiarificatore di come utilizzare i campi di tipo RADIO:
<p>Inserisci la tua fascia di età<br>
<input type=RADIO name="TIPO" value="15-17">Dai 15 ai 17 anni<br>
<input type=RADIO name="TIPO" value="18-20" CHECKED>Dai 18 ai 20 anni<br>
<input type=RADIO name="TIPO" value="20+">Oltre i 20 anni<br>
Avrete sicuramente notato l'utilizzo dell'attributo CHECKED all'interno del secondo campo,
quello con valore 18-20; questo consente di definire una scelta di default, specie in casi in
cui c'è bisogno di definire delle scelte consigliate (come molte volte incontrato da ognuno
di noi, specie nelle installazioni di software o nelle registrazioni guidate).
Il campo di tipo CHECKBOX
Esistono altre possibilità di operare delle scelte tra più opzioni; una di queste è di
assegnare all'attributo TYPE il valore CHECKBOX. Questa scelta non farà altro che
creare delle caselle del tipo riportato nell'esempio precedente ma con forma diversa. Un
esempio è quello riportato sotto.
Che tipo di soggetti fotografici preferisci?<br><input type=CHECKBOX
name="Persone">Persone<br><input type=CHECKBOX
name="Natura">Natura<br><input type=CHECKBOX name="Arte">Arte<br>
La differenza con il valore RADIO, oltre all'evidente forma delle caselle, è che in questo
caso possiamo operare più di una scelta.
Il campo di tipo TEXTAREA
Un'altro aspetto che possono assumere i campi destinati a raccogliere i dati è quello delle
aree di testo; queste si rivelano utili soprattutto quando si richiede, a chi visita la nostra
pagina, di inserire i suoi commenti e le sue proposte.
Queste aree vengono create tramite il tag <TEXTAREA>, a cui vanno assegnati il solito
attributo NAME, con il nome da assegnare all'area di testo, e gli attributi ROWS e COLS
seguiti rispettivamente dal numero di righe e colonne desiderato per impostare la stessa
area.
Il campo TEXTAREA necessita della chiusura </TEXTAREA>, altrimenti tutto quello che
inserirete dopo la dichiarazione del campo verrà visualizzato all'interno dell'area di testo.
Un esempio:
<p>Area per le comunicazioni dell'utente:<br>
<textarea name="commento" rows="10" cols="30">
</textarea>
Oppure:
<p>Area per le comunicazioni dell'utente:<br>
<textarea name="commento" rows="10" cols="30">
Inserisci qui un tuo commento
</textarea>
Adesso digitate i due codici ed osservate le differenze.
Il campo di tipo SELECT
Simile nella logica, ma diverso nell'aspetto grafico è l'uso del tag <SELECT>, con relativa
chiusura </SELECT>, che crea i cosiddetti menu a discesa contenenti opzioni di valori tra
cui scegliere.
Per visualizzare tutte le opzioni, senza attivare il menu a discesa, del menu può essere
inserito nell'attributo SIZE seguito dal numero totale delle opzioni contenute. Sconsiglio
vivamente l'utilizzo di questo attributo per motivi di sgradevole visualizzazione.
Per l'inserimento del testo relativo ai valori che può assumere il campo SELECT si utilizza
il tag <option>, con relativa chiusura </option> inserito tra i tag <SELECT> e
</SELECT>.
Per chiarire meglio sia la sintassi che il modo di operare di questo campo utilizziamo un
esempio:
<p>La tua provincia di residenza:  //codifica per lasciare un carattere di spazio.
<select name="prov">
<option value="ag">Agrigento</option>
<option value="al">Alessandria</option>
...
<option value="vv">Vibo Valentia</option>
</select>
Per quanto riguarda sempre il modulo a tendina SELECT bisogna fare un utile
approfondimento che riguarda il raggruppamento di determinati valori che appartengono
ad una stessa classe di valori.
Prendendo come esempio quello citato sopra, riguardo le province italiane, dato che
l'elenco risulta lungo ed estenuante nella sua trattazione, si potrebbero ordinare le
province per regione, in modo da avere una classe di valori appartenente ad uno stesso
gruppo, per poi poter essere selezionati attraverso un meccanismo a scorrimento laterale.
L'elemento che consente di attuare questa proprietà è optgroup.
<SELECT name="prov">
<option selected label="Nessuna" value="0">Nessuna</option>
<optgroup label="Abruzzo">
<option label="Chieti" value="CH">Chieti (CH)</option>
<option label="L'Aquila" value="AQ">L'Aquila (AQ)</option>
<option label="Pescara" value="PE">Pescara (PE)</option>
<option label="Teramo" value="TE">Teramo (TE)</option>
</optgroup>
<optgroup label="Basilicata">
<option label="Matera" value="MT">Matera (MT)</option>
<option label="Potenza" value="PZ">Potenza (PZ)</option>
</optgroup>
<optgroup label="Calabria">
<option label="Catanzaro" value="CZ">Catanzaro (CZ)</option>
<option label="Cosenza" value="CS">Cosenza (CS)</option>
<option label="Crotone" value="KR">Crotone (KR)</option>
<option label="Reggio C." value="RC">Reggio Calabria (RC)</option>
<option label="Vibo V." value="VV">Vibo Valentia (VV)</option>
</optgroup>
....
<optgroup label="Veneto">
<option label="Belluno" value="BL">Belluno (BL)</option>
<option label="Padova" value="PD">Padova (PD)</option>
<option label="Rovigo" value="RO">Rovigo (RO)</option>
<option label="Treviso" value="TV">Treviso (TV)</option>
<option label="Venezia" value="VE">Venezia (VE)</option>
<option label="Verona" value="VR">Verona (VR)</option>
</optgroup>
</SELECT>
Nella figura sotto è riprodotto il funzionamento di optgroup:
Il campo per l'invio dei dati
L'ultimo modulo da trattare è il tasto per l'invio o per resettare i dati contenuti nei moduli.
Per quanto riguarda l'invio dei dati allo script dichiarato nell'attributo ACTION del form
scriveremo:
<input type="submit" name="Invio" value="Invia i dati">
l'attributo VALUE conterrà il testo da visualizzare sul tasto di invio.
Il campo per cancellare i dati inseriti
Se non avete ancora spedito i dati ma volete cancellarli tutti per modificarli o per annullare
tutti i vostri inserimenti, accanto al tasto di invio inserite, anche se non è obbligatorio,
quest'altro tasto:
<input type="reset" name="annulla" value="Cancella i dati">
Il controllo sui moduli – Moduli disabilitati.
Laddove l'immissione di dati da parte dell'utente non sia necessario o addirittura nocivo, è
di grande importanza poter disabilitare un modulo, ad esempio un campo di tipo testo, o
presentarlo in modo che sia visibile solo il valore immesso in sola lettura.
Un esempio può essere la disabilitazione del pulsante d'invio di un form finché l'utente non
abbia completato i dati richiesti.
L'attributo che permette questo tipo di controllo sui moduli è disabled.
I tipi di moduli che accettano questo attributo sono: tutti i moduli di tipo INPUT, il modulo
BUTTON, la TEXTAREA, il tipo SELECT ed OPTION ed il citato OPTGROUP.
Nei nostri test per la maggior parte dei casi l'attributo è stato interpretato correttamente.
Per il momento soltanto nel modulo OPTION e OPTGROUP il browser I.E. 7 non ha
riconosciuto l'attributo disabled, mentre Firefox non ha riscontrato problemi.
Questo esempio vi propongo di verficarlo con il vostro browser usuale:
<form method="post" action="">
<table border="1" width="100%" height="152">
<tr>
<td width="100%" height="71" colspan="7"><b><font face="Arial" size="5">
I controlli sui moduli:</font></b></td>
</tr>
<tr>
<td width="14%" height="80" bgcolor="#FFFF66" align="center">
<font face="Arial"><b>Modulo disabilitato:
<input type="text" name="dis" size=31 disabled value="Disabilitato, con testo
visualizzato."></td>
<font face="Arial"><b>Modulo abilitato:
<input type="text" name="enab" size=21></td>
<font face="Arial"><b>Modulo di sola lettura:
<input type="text" name="dis1" size=34 readonly value="A sola lettura. Valore non
modificabile."></td>
<font face="Arial"><b>Modulo SELECT disabilitato:<br>
<select name="prova1" disabled>
<option>Valore1</option>
</select></td>
<font face="Arial"><b>Modulo SELECT con option disabilitato:<br>
<select name="prova2">
<option disabled>Valore2</option>
</select></td>
<font face="Arial"><b>Modulo TEXTAREA disabilitato:<br>
<textarea name="note" rows=4 cols="21" disabled>
Testo di prova
</textarea></td>
<font face="Arial"><b>Modulo SELECT con optgroup disabilitato:<br>
<select name="prova">
<option selected label="Nessuna" value="0">Nessuna</option>
<optgroup label="Abruzzo">
<option label="Chieti" value="CH">Chieti (CH)</option>
<option label="L'Aquila" value="AQ">L'Aquila (AQ)</option>
<option label="Pescara" value="PE">Pescara (PE)</option>
<option label="Teramo" value="TE">Teramo (TE)</option>
</optgroup>
<optgroup label="Basilicata" disabled>
<option label="Matera" value="MT">Matera (MT)</option>
<option label="Potenza" value="PZ">Potenza (PZ)</option>
</optgroup>
<optgroup label="Calabria">
<option label="Catanzaro" value="CZ">Catanzaro (CZ)</option>
<option label="Cosenza" value="CS">Cosenza (CS)</option>
<option label="Crotone" value="KR">Crotone(KR)</option>
<option label="Reggio C." value="RC">Reggio Calabria (RC)</option>
<option label="Vibo V." value="VV">Vibo Valentia (VV)</option>
</optgroup>
<optgroup label="Veneto">
<option label="Belluno" value="BL">Belluno (BL)</option>
<option label="Padova" value="PD">Padova (PD)</option>
<option label="Rovigo" value="RO">Rovigo (RO)</option>
<option label="Treviso" value="TV">Treviso (TV)</option>
<option label="Venezia" value="VE">Venezia (VE)</option>
<option label="Verona" value="VR">Verona (VR)</option>
</optgroup>
</select></td>
</tr>
</table>
</form>
Se utilizzate Mozilla Firefox dovreste ottenere il seguente risultato, come da figura sotto:
Il controllo sui moduli – Moduli in sola lettura.
Un'altra proprietà se non necessaria almeno utile è definire il contenuto di un modulo in
sola lettura per i casi in cui dobbiamo redigere un messaggio per l'utente, il quale deve
essere in grado di leggerlo nello spazio limitato di un modulo di testo o una textarea.
L'attributo da aggiungere è readonly ed è di tipo booleano. Se presente disabilita la
possibilità di modificare il contenuto del modulo.
Es.:
<textarea readonly name="cont" cols="60" rows="10"
style="background:#FFFFE6; font-size: 9px; COLOR: #666666;
FONT-FAMILY: Verdana, arial;">
TERMINI, CONDIZIONI E PRIVACY
ASSOLUTAMENTE VIETATO:
- Inserire dati che possono risultare: offensivi, pornografici, a
sfondo razziale, illegali secondo leggi vigenti italiane ed internazionali;
- Inserire dati che possano violare la privacy di terze parti;
ALTRE CONDIZIONI:
- TUTTI i dati inseriti potranno essere trattati SOLO dal webmaster nel rispetto della Legge 675/96 e successive
modificazioni;
- Tutto cio' che e' legato direttamente ed anche indirettamente all'utilizzo del seguente servizio puo' variare o cessare
senza preavviso o comunicazione alcuna;
- Il codice IP di chi inserisce dati, la data e l'ora dell'inserimento sono registrati per motivi di sicurezza;
</textarea>
Utilizzando i browser più comuni dovreste visualizzare un normale modulo con contenuto
non modificabile:

I moduli HTML - Maurizio Gambino.it

Transcript

Documenti analoghi

Ultra High Performance Display Board An astonishing powerful

La facoltà di Lettere e Filosofia in chat

AebiTerratrac - EDMAEBI.com!

slax su ssd eeepc asus 4gb

AGPF as HSDPA gateway

GLCCNV August 3rd, 2016 Buca di Beppo Excalibur Antipasto

HTML e PHP in sintesi

discover - Sfoggia