HTML

Creazione di moduli

Prof.ssa Daniela Decembrino

La pagina web

Una pagina web è un insieme di contenuti• testuali (parole), • grafici (disegni, immagini, foto) • multimediali (suoni, video)

visualizzati sullo schermo durante una connessione in rete (Internet, Intranet, Extranet) effettuata utilizzando un opportuno programma (browser) quale Internet Explorer, Mozzilla Fire Fox, Google Chrome.

Gli aspetti di un pagina web

Una pagina web può essere:

• statica HTML

• dinamica HTML + script = DHTML

• interattiva DHTML + presenza umana da ambo i lati della comunicazione (ricevitore, trasmettitore): videoconferenza, chat.

Il modulo web

Un modulo web è una pagina web contenente elementi che possano essere inviati dall’utente umano redattore (trasmettitore) all’utente umano destinatario (ricevitore) sia in modalità sincrona che in modalità asincrona. Esistono varie tipologie di moduli:

• modulo d’ordine ;• modulo di iscrizione;• sondaggio.

Un modulo web costituisce esempio di pagina web dinamica.

L’interazione client/server

Modulo d’ordine

Internet Internet

Up Load

Down Load

I linguaggi di rete

I linguaggi di rete si suddividono in due categorie:• Client side;• Server side.

Questi linguaggi permettono di programmare le pagine web rendendole dinamiche oppure interattive.Ricordiamo che l’HTML non è un linguaggio di programmazione!

Gli script Client side

Gli script Client side sono codici eseguiti sulla macchina in cui risiede il browser. I più famosi e diffusi script Client side sono:• JavaScript, VBScript;• Applet Java.

I primi due sono embedded cioè interni: vengono inseriti all’interno dell’HTML della pagina web cui si riferiscono.L’ultimo è esterno cioè risiede in un file esterno che viene richiamato all’interno dell’HTML.

Gli script Server side

Gli script Server side sono codici eseguiti sulla macchina in cui risiede il Server che deve elaborare i dati ricevuti dal Client.I più famosi e diffusi script Server side sono:• PHP (Personal Home Pages);• ASP (Active Server Pages).

Il primo è open source scaricabile liberamente dal sito www.php.net . Il secondo è proprietario. Entrambi questi script vengono inclusi nell’HTML.

Le applicazioni CGI

Le applicazioni CGI (Common Gateway Interface) consentono di creare pagine web dinamiche sia lato Client che lato Server ricorrendo ai linguaggi di programmazione quali:• C;• Java.

La creazione di un form

L’inserimento di un modulo all’interno di una pagina web avviene attraverso la creazione di un form accompagnato dai suoi attributi method e action. …

<FORM NAME=“nomeForm” METHOD=“metodo” ACTION=“destinazione”>Modulo da compilare e inviare.</FORM>…

L’attributo method

L’attributo method specifica il metodo di invio dei dati dal client al server e può assumere tre parametri:•get invia i dati inseriti nel modulo rendendo visibile l’indirizzo di ricezione (poco sicuro!);•post invia i dati inseriti nel modulo rendendo invisibile l’indirizzo di destinazione (preferibile!);•enctype riguarda i MIME (Multipurpose Internet Mail Extension) .

L’attributo action

L’attributo action specifica l’azione invocata in seguito alla pressione del bottone di invio (submit) che indica l’indirizzo del destinatario.

…<FORM><ACTION=“mailto:daniela.decembrino@gmail.com”>Modulo da compilare e inviare.</FORM>…

Gli elementi che compongono il form

Gli elementi che compongono un form sono quattro:•input consente l’immissione dei dati descritti mediante l’attributo type (pulsante, casella di testo, sceltamutipla);•textarea consente la creazione di una area di testo per contenere testi estesi; •select consente la creazione di menù;•fieldset consente di incorniciare più campi.

L’elemento input e i parametri dell’attributo type L’elemento input è seguito dall’attributo type che può assumere i seguenti parametri:• text casella di testo su riga singola;• radio scelta esclusiva;• checkbox scelta multipla;• submit, image, reset pulsante di invio, pulsante di ripristino.

L’elemento input e gli altri attributi che seguono typeL’elemento input deve essere seguito dall’attributo type e dagli altri attributi che sono:•name nome della variabile;•maxlength lunghezza del valore assunto dalla variabile;•size dimensione dello scrolling;•value contenuto della variabile ;•readonly eventuale sola lettura;•enabled eventuale disabilitazione.

L’elemento input seguito dall’attributo type=“text”

…<FORM>…Cognome<INPUT TYPE=“text” NAME=“cognome” SIZE=“25” VALUE=“lunghezza massima consentita 25 caratteri”>…</FORM>…

L’elemento input seguito dall’attributo type=“radio”

…<FORM>…0-9<INPUT TYPE=“radio” NAME=“scelta” VALUE=“0-9”><BR>10-19<INPUT TYPE=“radio” NAME=“scelta” VALUE=“10-19”>…</FORM>…

L’elemento input seguito dall’attributo type=“checkbox”

…<FORM>…cinema<INPUT TYPE=“checkbox” NAME=“cinema” VALUE=“cinema”><BR>teatro<INPUT TYPE=“checkbox” NAME=“teatro” VALUE=“teatro”>…</FORM>…

L’elemento input seguito dall’attributo type=“submit”

…<FORM>…<INPUT TYPE=“submit” VALUE=“Invio modulo”>…</FORM>…

L’elemento input seguito dall’attributo type=“image”

Se l’elemento input viene seguito dall’attributo type impostato al parametro image seguito a sua volta dall’indicazione dell’URL specificato tramite il tag SRC allora il pulsante di invio dei dati contenuti nel modulo viene raffigurato con l’immagine specificata.

L’attributo type=“image”

…<FORM>…<INPUT TYPE=“image” SRC=“immagine.gif”>…</FORM>…

L’elemento input seguito dall’attributo type=“reset”

…<FORM>…<INPUT TYPE=“reset” VALUE=“Ripristino del modulo”>…</FORM>…

L’elemento textarea e i parametri dei suoi attributi L’elemento textarea è seguito dai seguenti attributi:• name nome del testo;• rows numero di righe del testo;• cols numero di colonne del testo;• wrap possibilità di andare a capo (off / virtual)

L’elemento textarea

…<FORM>…<TEXTAREA NAME=“testo” ROWS=“2” COLS=“22” WRAP=“off”>Il presente testo viene inserito continuativamente perché WRAP è OFF!…</FORM>…

L’elemento select e i parametri dei suoi attributi L’elemento select è seguito dai seguenti attributi:• name nome dell’elenco;• multiple size opzione per indicare la scelta multipla.

L’elemento select prevede un tag di chiusura e uno di apertura al cui interno viene inscatolato un altro tag di chiusura e apertura che è option riscritto per ciascuna opzione di scelta possibile.

L’elemento select

…<FORM>…<SELECT NAME=“elenco” MULTIPLE SIZE=“5” ><OPTION>Primo valore</OPTION><OPTION>Secondo valore</OPTION></SELECT>…</FORM>…

L’elemento select seguito dal tag optgroup L’elemento select può anche essere seguito dal tag di sola apertura optgroup che consente di raggruppare le opzioni di scelta utilizzando il seguente attributo:• label nome del sotto elenco.

Il tag optgroup deve precedere ogni coppia di tag option previsti all’interno del tag di apertura e chiusura select.

L’uso del tag optgroup all’interno dell’elemento select

…<FORM>…<SELECT NAME=“Elenco”><OPTGROUP LABEL=“Frutta”><OPTION>Pere</OPTION><OPTION>Mele</OPTION><OPTGROUP LABEL=“Verdura”><OPTION>Rape</OPTION><OPTION>Cicorie</OPTION></SELECT>…</FORM>…

L’elemento fieldset

L’elemento fieldset svolge una funzione puramente esteticag consentendo di raggruppare più campi di uno stesso modulo incorniciandoli. Questo elemento è seguito dall’attributo di apertura e chiusura espresso mediante il seguente tag :• legend titolo aggiuntivo alla sezione di campi incorniciati.

Il tag legend consente di allineare (align) il titolo e di posizionarlo (top, center, bottom, left, right).

Raggruppamento dei campi all’interno del modulo

…<FORM>…<FIELDSET><LEGEND ALIGN=“center”>Area riservata</LEGEND>…</FIELDSET>…<FIELDSET><LEGEND ALIGN=“center”>Ordine</LEGEND>…</FIELDSET>…</FORM>…