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
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 type
L’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>
…