Creazione di form e controlli utenti Parte 1

I form o moduli sono uno lo strumento essenziale utilizzato nel Web per inviare dei dati a un server per effettuare delle operazioni di elaborazione predefinite.
Essi si creano attraverso l'utilizzo del tag <form>, che ha i seguenti attributi:

• action: indica l'URL di destinazione dei dati inviati con il form. Generalmente punta a un file su un server web scritto con linguaggi lato server come PHP, ASP.NET, JEE ed è in grado di interpretare le informazion ottenute e elaborarle in un modo stabilito restituendo il risultato sotto forma di una pagina HTML;


• method: indica il metodo o comando HTTP da usare quando si effettua il submit del form. Può avere il valore GET inviando i dati via URL come una query strng , oppure il valore POST dove i dati sono inviati come parte della richiesta nel corpo del messaggio dopo gli header;


• target: indica dove visualizzare la risposta che si è ricevuta a seguito del submit del form. Può assumere i valori _blank, _self, _parent, _top e _iframename;


• autocomplete: indica se, per i campi di un form, devono essere memorizzati i valori precedentemente inseriti al fine di consentire la visualizzazione di un'area rettangolare entro la quale appariranno i valori memorizzati che sono coerenti con quello che si sta digitando. Se l'attributo è omesso allora il suo stato sarà su on, mentre, se si vuole evitare l'autocompletamento, bisognerà specificare l'attributo con il valore off;


• novalide: indica che i dati inseriti nei relativi campi di input non devono essere validati quando si effettuerà il submit del form;


• entype: indica in che modo i dati di un form devono essere codificati quando l'attributo method ha come valore POST. I suoi valori possono essere: application/x-www-form-urlencoded, per indicare che tutti i caratteri devono essere codificati prima di essere inviati; multipart/form-data, per indicare una modalità di codifica che permette al form di inviare dati binari o caratteri non ASCII; text/plain, per indicare che tutti i caratteri devono essere codificati prima di essere inviati.

Un form, per poter inviare informazioni al server, deve poter contenere una serie di controlli grafici di interfaccia (widget) attraverso cui inserire del testo, compiere delle scelte e così via.
Possiamo utilizzare i widget mediante questi tag e attributi:

• <input type="text">: con esso si crea unaa casella rettangolare a riga singola dove l'utente può inserire del testo.


• <input type="password">: con esso di crea uan casella rettangolare a riga singola dove l'utente può inserire i caratteri di una password che non sono mostrati in chiaro ma sono sostituiti dal carattere asterisco (*) o da un simbolo di un cerchietto pieno nero (●).


• <input type="button">: con esso si crea un comune pulsante con un'etichetta testuale cui si può essere associato, del codice da eseguire quando si fa clic su di esso.


• <input type="submit">: con esso si crea un comune pulsante con un'etichetta testuale che, quando attivato, consente di effettuare l'invio dei dati del relativo form.


• <input type="reset">: con esso si crea un comune pulsante con un'etichetta testuale che, quando attivato, consente di cancellare gli eventuali dati inseriti in tutti i campi del testo del form.


• <input type="checkbox">: con esso si crea una casella di controllo la cui interazione causa l'aggiunta o la rimozione di un segno di spunta che ne indica lo stato di attivato/disattivato.


• <input type="radio">: con esso si crea un pulsante di opzione la cui interazione causa l'aggiunta di un simbolo di selezione sul pulsante selezionato e la contestuale deselezione con la rimozione dello stesso simbolo da un altro pulsante precedentemete selezionato.


• <input type="file">: con esso si crea un controllo formato da una casella di testo a riga singola e un pulsante (di norma con valore Sfoglia) dove l'attivazione di quest'ultimo farà apparire una finestra di selezione di uno o più file.


• <input type="number">: con esso si crea un controllo formato da una casella di testo a riga singola con a fianco due pulsanti: uno con il simbolo di freccia rivolta verso l'alto e uno con il simbolo di frecca rivolta verso il basso chiamati spinner e spin box. Questi pulsanti consentono di visualizzare all'interno della casella di testo dei valori numerici.


• <input type="range">: con esso si crea un controllo, chiamato slider, formato da una barra orizzontale o verticale con un cursore il cui spostamento permette di selezionare dei valori di tipo numerico.


• <input type="color">: con esso si crea un controllo che consente di scegliere, tramite un selettore, un colore che è espresso in esadecimale nella forma RGB.


• <input type="image">: con esso si crea un pulsante che è renderizzato com un'immagine specificata.


• <input type="email">: con esso si crea una casella rettangolare a riga singola dove l'utente può inserire del testo che dovrebbe conformari al pattern utilizzato per esprimere un indirizzo di posta elettronica.


• <input type="url">: con esso si crea una casella rettangolare a riga singola dove l'utente può inserire del testo che dovrebbe conformarsi al pattern utilizzato per esprimere un URL assoluto.


• <input type="search">: con esso si crea una casella rettangolare a una riga singola dove l'utente può inserire del testo per effettuare delle ricerche.


• <input type="tel">: con esso si crea una casella rettangolare a riga singola dove l'utente può inserire del testo che dovrebbe rappresentare un numero telefonico.


• <input type="datetime">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere una data e un orario. Per la data si potrebbe visualizzare un calendario sul quale selezionarla, mentre per l'ora potrebbe apparire come uno spin box dove inserire l'ora da 0 a 23, i minuti da 0 a 59 e così via. Il formato completo per una data e un'orario sono: YYYY-MM-DDTHH:MM:SS.FFFtimezone dove la lettera T separa la parte data dalla parte orario, le lettere FFF indicano le frazioni di secondo, timezone indica l'offset del fuso orario.


• <input type="datetime-local">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere una data e un orario locale, senza considerare il fuso orario.


• <input type="date">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data senza un orario nel formato anno-mese-giorno (YYYY-MM-DD).


• <input type="month">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data espressa nel formato anno-mese, (YYYY-MM).


• <input type="week">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente una data espressa nel formato anno-settimana (YYYY-Www).


• <input type="time">: con esso si crea un controllo attraverso il quale è possibile selezionare e scegliere solamente un orario espresso nel formato ore-minuti-secondi e frazioni di secondo (HH-MM-SS.FFF).


• <textarea>: con esso si crea un box rettangolare formato da più righe dove l'utente può inserire del testo.


• <select>: con esso si crea un controllo definito drop-down list, formato da una combinazione di due elementi grafici: il primo è un rettangolo a riga singola (casella di testo) con a lato un simbolo di freccia e il secondo è un'altro rettangolo, che appare se l'utente fa clic sul simbolo della freccia o sulla casella di testo. Al suo interno troviamo una lista di voci item, definibili tramite il tag <option>, che può essere a scelta singola o multipla.


• <datalist>: con esso si crea una sorta di list box che contiene una serie di voci (<option>) mostrate come suggerimento quando un utente inizia a digitare del testo in una casella ottenuta dall'elemento input, per il quale l'attributo list è impostato con il valore dell'attributo id dell'elemento datalist.


• <keygen>: con esso si crea un controllo che consente di generare delle chiavi per un sistema crittografico.

Immagini e creazione di mappe

Le immagini e in generale la grafica rappresentano una parte importante nella costruzione di un sito web.
Sul web le immagini sono generalmente create con questi formati: GIF, PGN, JPEG.
In una pagina HTML un'immagine è reperita come risorsa e poi visualizzata grazie al tag <img>, per il quale si possono definire i seguenti attributi:

• src: che indica l'URL dove reperire l'immagine;


• alt: che indica un testo alternativo (alternative text) che viene mostrato nel caso in cui un'immagine, per qualsiasi ragione, non è più visualizzabile;


• width e height: indicano rispettivamente la lunghezza e l'altezza (in pixel) dell'immagine;


• usemap: indica il riferimento a un elemento di tipo mappa, espresso attraverso il tag <map>, utile per definire un'area geometrica all'interno di un'immagine che può essere utilizzata come link.

Nel codice qui sopra viene mostrata un'immagine di Dante Allighieri con in mano la Divina Commedia i cui contorni sono stati disegnati con un poligono trasformandola in un link verso una pagina Wikipedia dedicata al poema.
Nel codice, oltre al tag <img>, notiamo anche:

• l'utilizzo dell'attributo title che consente di far visualizzare, quando si posiziona il mouse sopra l'immagine, una sorta di tooltip;


• l'utilizzo del tag <map>, con cui definiamo una mappa dove impostiamo l'attributo name che ne indica il nome che viene riferito dalla relativa immagine mediante l'attributo usemap nel tag <img> preceduto dal carattere di hash &#35;;


• l'utilizzo, all'interno del tag <map>, del tag <area>, con cui definiamo l'area geometrica all'interno dell'immagine che verrà utilizzata come collegamento ipertestuale (link). Tali aree sono definite dagli attributi shape, che determinano la tipologia dell'area tra: rettangolare (rect o rectangle), circolare (circ o circle) o poligonale (poly o polygon). Troviamo inoltre l'attributo coords che permette di impostare le coordinate dell'area.

L'HTML consente di utilizzare il tag <figure> per annotare illustrazioni, diagrammi, foto, listati di codice ecc, e il tag <figcaption> per attribuire una didascalia all'elemento annotato. I due tag citati consentono di dare un significato strutturale e di relazione tra l'immagine e una sua etichetta descrittiva in modo che essi siano, nel contenuto principale del documento HTML, un'entità indipendente.
Il tag <figure>è utilizzato unitamente al tag <map>, di cui si fornisce la relativa descrizione mediante il tag <figcaption>.

Utilizzo delle tabelle

Le tabelle sono degli elementi strutturali formati da un insieme di righe e colonne, dove ogni intersezione tra esse indica una cella all'interno della quale possiamo inserire del contenuto che spesso è di tipo testuale o grafico.
La creazione delle tabelle si effettua utilizzando i seguenti tag:

• <table>: rappresenta l'elemento principale per la creazione di una tabella.


• <tr>: rappresenta una riga di celle in una tabella (table row).


• <td>: rappresenta una singola cella dentro la quale viente inserito il contenuto (table data).


• <th>: rappresenta una cella di intestazione (table header).


• <thead>: rappresenta un insieme di righe che contengono delle celle da utilizzare come intestazione (column label) per l'elemento table.


• <tfoot>: rappresenta un insieme di righe che contengono delle celle da utilizzare come piede (column summary) per l'elemento table.


• <body>: rappresenta un insieme di righe che contengono le celle del contenuto principale della tabella.


• <colgroup>: rappresenta un insieme di una o più colonne ( definito attraverso il valore dell'attributo span) cui applicare una determinata formattazione, evitando di ripeterla per ogni colonna.


• <col>: rappresenta un insieme di una o più colonne ( il numero viene definito attraverso il valore dell'attributo span) di un gruppo di colonne rappresentate dall'elemento colgroup.


• <caption>: rappresenta il titolo della tabella.

La dimensione della tabella (e delle relative righe e colonne) utilizza i valori di default. Quindi la quantità di testo inserito all'interno di una cella ne causa il suo ridimensionamento, che si ripercuote a sua volta sulle altre celle relative alla sua stessa posizione ma che si trovano nelle altre righe.
La tabella, in pratica, si espande e si contrae in maniera fluida a seconda del contenuto che struttura.

Notiamo quindi l'utilizzo del tag <table> sul quale impostiamo l'attributo border con il valore di 1 al fine di far apparire attorno alle celle un bordo.
Nel tag <table> definiamo poi i tag per l'intestazione, per il sommario e per il corpo della tabella che conterranno le relative righe e celle.

I tag <td> e <th> possono avvalersi degli attributi colspan e rowspan per indicare, rispettivamente, per quante colonne o su quante righe una cella si deve espandere al fine di creare delle strutture tabellari di maggiore complessità.
Nell'esempio qui sotto troviamo nella prima tabella l'estensione per colonne mentre nella seconda troviamo l'estensione per righe.

Generazione di liste

Le liste sono un utile strumento per mostrare del testo sotto forma di elenchi ordinati secondo una numerazione oppure non ordinati.
In HTML5 gli elenchi si creano mediante i tag <ol>, per le liste ordinate (ordered list), e <ul> per le liste non ordinate (unordered list).
Per le singole voci delle liste dobbiamo utilizzare, invece, il tag <li> (list item).
Abbiamo, inoltre, la possibilità di generare delle liste dette di definizione, tramite il tag <dl> (definition list), caratterizzate dalla presenza di un termine (tag <dt>, definition term) e dalla relativa descrizione (tag <dd>, definition desctription).

Il codice qui sopra crea una pagina HTML dove sono presenti: una lista ordinata, che mostra un elenco dei 10 linguaggi di programmazione più popolari; una lista non ordinata, che mostra un elenco dei principali sistemi operativi dove, in più, per ciascuno di essi è presente un'altra lista, annidata e non ordinata che mostra l'elenco di chi li ha inventati; una lista di definizioni per il termine TIOBE (non completo) usato nel titolo <h4> di inizio pagina; il tag <hr> (horizontal rule) che permette di mostrare una linea orizzontale e che funge da elemento separatore tra le sezioni di una pagina o, per usare la sua estensione terminologica adottata nella specifica di HTML5, da indicatore di un break tematico tra parafrasi (come si può avere, per esempio, quando si ha una transitazione tra i vari argomenti di una sezione, oppure in un cambiamento di scena di una storia).
Per quanto riguarda le liste ordinate può essere interessante sapere che il tag <ol> accetta i seguenti attributi:

• reversed, che, se presente, permette di mostrare l'elenco in modo discendente (per esempio ..., 3, 2, 1);


• start, che indica il numero a partire dal quale iniziare la numerazione dell'elenco (di default 1). Ciò significa che l'istruzione <ol start="5"> farà cominciare la lista con il numero 5;


• type, che consente di specificare il tipo di marcatore da utilizzare nell'elenco tra 1 (per i numeri decimali, 1., 2., 3. e così via), a (per l'alfabeto latino in minuscolo, a., b., c. e così via); A (per l'alfabeto latino in maiuscolo, A., B., C. e così via), i (per i numeri romani in minuscolo, i., ii., iii. e così via) e I (per i numeri romani in maiuscolo, I., II., III. e così via).