Metodologie Informatiche Applicate al Turismo 8. HTML Parte II Paolo Milazzo

(1)

8. HTML Parte II

Paolo Milazzo

Dipartimento di Informatica, Universit`a di Pisa

http://pages.di.unipi.it/milazzo

milazzo di.unipi.it

Corso di Laurea in Scienze del Turismo A.A. 2016/2017

Paolo Milazzo (Universit`a di Pisa) MetInf - 8. HTML Parte I A.A. 2016/2017 1 / 24

(2)

Sommario

1

Tabelle

2

Forms

(3)

Nei documenti HTML si possono inserire dati che hanno una naturale rappresentazione come tabelle tramite il tag <table>;

(4)

Le tabelle (2)

La struttura di base di una tabella ` e la seguente:

L’intera tabella ` e racchiusa nel tag <table> che contiene:

una lista di righe, ogniuna racchiusa nel tag <tr>, che a sua volta contiene:

una lista di elementi (uno per ogni colonna) racchiusi nel tag <td>

< t a b l e >

< tr >

< td > c e l l a A1 < / td >

< td > c e l l a B1 < / td >

< td > c e l l a C1 < / td >

< / tr >

< tr >

< td > c e l l a A2 < / td >

< td > c e l l a B2 < / td >

< td > c e l l a C2 < / td >

< / tr >

< tr >

< td > c e l l a A3 < / td >

< td > c e l l a B3 < / td >

< td > c e l l a C3 < / td >

< / tr >

< / t a b l e >

(5)

Alcune celle possono anche rappresentare titoli di righe o colonne:

per queste si usa <th> (table head) al posto di <td> (table data) la formattazione di queste celle ` e solitamente diversa dalle altre (a discrezione del browser)

< t a b l e >

< tr >

< th > < !- - c e l l a v u o t a in a n g o l o - -> < / th >

< th > A < / th > < th > B < / th > < th > C < / th >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td > < td > c e l l a B1 < / td >

< td > c e l l a C1 < / td >

< / tr >

. . . .

< tr >

< th > 3 < / th >

< td > c e l l a A3 < / td > < td > c e l l a B3 < / td >

< td > c e l l a C3 < / td >

< / tr >

< / t a b l e >

(6)

Le tabelle (4)

E’ anche possibile specificare celle che spaziano su pi` u righe o colonne:

usando gli attributi rowspan e colspan del tag <td>

il valore degli attributi ` e il numero di righe o colonne su cui spaziare

< t a b l e >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< td c o l s p a n =2 > c e l l a B1 + C1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< td r o w s p a n =2 > c e l l a A2 + A3 < / td >

< td > c e l l a B2 < / td > < td > c e l l a C2 < / td >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(7)

E’ possibile definire il bordo di una tabella tramite l’attributo border del tag <table>;

Il valore dell’attributo ` e lo spessore del bordo espresso in pixel

< t a b l e b o r d e r =2 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(8)

Le tabelle: aspetti di formattazione (2)

Gli attributi width e height specificano larghezza e altezza della tabella (in pixel o in % sulle misure della finestra del browser)

I

Con un valore percentuale la tabella si ridimensiona automaticamente quando si ridimensiona la finestra del browser

< t a b l e b o r d e r =2 w i d t h = 9 5 % h e i g h t = 2 0 0 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(9)

L’attributo cellspacing specifica lo spazio tra le celle (in pixel) L’attributo cellpadding specifica lo spazio vuoto tra il bordo di una cella e il suo contenuto (in pixel)

< t a b l e b o r d e r =2 c e l l s p a c i n g =3 c e l l p a d d i n g =8 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td > c e l l a A1 < / td >

< / tr >

< tr >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >

(10)

Le tabelle: aspetti di formattazione (4)

Gli attributi align e valign possono essere usati in <table>, <tr> e

<td> per specificare l’allineamento orizzontale e verticale del testo nella tabella, in una riga o in una cella;

I

Valori per align: left,right,center;

I

Valori per valign: top,middle,bottom;

< t a b l e b o r d e r =2 c e l l s p a c i n g =3 c e l l p a d d i n g =8 >

< tr >

< / tr >

< tr >

< th > 1 < / th >

< td a l i g n = " r i g h t " > c e l l a A1 < / td >

< / tr >

< tr a l i g n = " c e n t e r " v a l i g n = " top " >

< th > 2 < / th >

< / tr >

< tr >

< th > 3 < / th >

< / tr >

< / t a b l e >Paolo Milazzo (Universit`a di Pisa) MetInf - 8. HTML Parte I A.A. 2016/2017 10 / 24

(11)

Si pu` o anche impostare la larghezza delle colonne e l’altezza delle righe di una tabella

I

Bisogna usare opportunamente gli attributi width e heigth del tag

<td> (usano valori in pixel o in percentuale) E’ bene ricordare che:

I

Una colonna ` e larga quanto la pi` u larga delle sue celle, quindi si pu` o impostare la larghezza di una colonna in una sola cella

I

Se non si specifica nessuna larghezza il browser adatter` a le colonne ai contenuti e la larghezza della tabella verr` a di conseguenza

I

Se si specifica solo la larghezza dell’intera tabella il browser imposter` a la larghezza delle colonne “libere” (la cui larghezza non ` e specificata) di conseguenza

I

Se si specificano tutte le larghezze (tabella e tutte le colonne) ` e bene che la somma delle larghezze delle colonne sia pari alla larghezza della tabella

Un discorso analogo vale per l’altezza delle righe.

I

l’altezza di una riga pu` o essere specificata anche applicando l’attributo height al tag <tr>

(12)

Forms (1)

Fino ad ora abbiamo visto metodi per visualizzare contenuti di varia natura (testo, immagini, liste, tabelle, ecc..)

HTML prevede un metodo abbastanza semplice per inviare dati dal browser dell’utente al server: i form

Un form non ` e altro che un modulo che pu` o essere riempito dall’utente attraverso il browser

Un form pu` o essere fatto di caselle di testo da riempire, scelte multiple, bottoni, ecc...

I dati raccolti tramite il form possono essere inviati ad un applicazione eseguita sul server oppure via email

(13)

Un form viene definito tramite il tag <form> che contiene, uno dopo l’altro, tutti gli elementi di cui ` e composto (caselle di testo, scelte multiple, ecc...)

Un elemento di un form ` e definito tramite il tag <input> che ha un attributo type che viene usato per specificare di quale tipo di elemento si tratti

I valori pi` u comuni per l’attributo type sono i seguenti:

I

text - corrisponde a una casella di testo di una sola riga che pu` o essere riempita dall’utente

I

password - simile a text, ma durante l’inserimento non visualizza i caratteri digitati (li sostituisce con asterischi o pallini)

I

radio - definisce una scelta singola tra un numero finito di alternative

I

checkbox - definisce una scelta multipla

Altri tag consentono di definire caselle di testo multilinea (<textarea>) e caselle di selezione (<select>)

(14)

Forms (3)

Il tag <input> serve in sostanza per assegnare un valore ad una variabile

Il nome della variabile viene specificato tramite l’attributo name Nel caso di una casella di testo il valore assegnato alla variabile ` e il testo inserito dall’utente

Nel caso degli strumenti di scelta tra varie alternative il valore da assegnare ` e inserito tramite l’attributo value

Il tag <input> non prevede contenuto, quindi non ` e prevista la chiusura </input>

(15)

< f o r m >

U s e r n a m e : < i n p u t t y p e = " t e x t " n a m e = " u s e r " > < br >

P a s s w o r d : < i n p u t t y p e = " p a s s w o r d " n a m e = " pwd " >

< / f o r m >

< f o r m >

T i t o l o di s t u d i o < br >

< i n p u t t y p e = " r a d i o " n a m e = " t i t o l o "

v a l u e = " e l e m " > L i c e n z a E l e m e n t a r e < br >

v a l u e = " m e d i a " > L i c e n z a M e d i a < br >

v a l u e = " d i p l " > D i p l o m a < br >

v a l u e = " l a u r e a " > L a u r e a

< / f o r m >

< f o r m >

P a t e n t i di g u i d a < br >

< i n p u t t y p e = " c h e c k b o x " n a m e = " p a t e n t e A "

v a l u e = " A " > P a t e n t e A < br >

< i n p u t t y p e = " c h e c k b o x " n a m e = " p a t e n t e B "

v a l u e = " B " > P a t e n t e B < br >

< i n p u t t y p e = " c h e c k b o x " n a m e = " p a t e n t i "

v a l u e = " a l t r e " > A l t r e p a t e n t i

< / f o r m >

(16)

Forms (5)

Caselle di testo multi-linea possono essere definite tramite il tag

<textarea>

Il tag <textarea> prevede due attributi rows e cols che ne

specificano le dimensioni della casella (numero di righe e di colonne) Il contenuto del tag viene visulizzato all’interno della casella di testo (ovviamente ` e modificabile)

< f o r m >

I n s e r i s c i un c o m m e n t o qui :

< t e x t a r e a r o w s = " 10 " c o l s = " 30 " >

No c o m m e n t .

< / t e x t a r e a >

< / f o r m >

(17)

D a t a di n a s c i t a ( gg / mm / a a a a ):

< i n p u t t y p e = " t e x t " n a m e = " gg "

s i z e = " 2 " m a x l e n g t h = " 2 " >

< i n p u t t y p e = " t e x t " n a m e = " mm "

s i z e = " 2 " m a x l e n g t h = " 2 " >

< i n p u t t y p e = " t e x t " n a m e = " a a a a "

s i z e = " 4 " m a x l e n g t h = " 4 " >

Note:

Nei tipi "text" e "password" con l’attributo "maxlength" si pu` o specificare il numero max di caratteri che possono essere inseriti Nei tipi "text" e "password" con l’attributo "size" si pu` o specificare la larghezza (in caratteri) della casella di testo

I

la visualizzazione della larghezza non ` e uguale in tutti i browser

I

meglio usare il linguaggio CSS per questo aspetto

Nel tipo "radio" bisogna usare lo stesso nome per tutte le opzioni che fanno parte della stessa scelta

I

Il browser capir` a in questo modo quali sono le alternative tra le quali l’utente deve scegliere

I

Due gruppi di elementi di tipo "radio" distinti nella stessa pagina dovranno usare nomi diversi

(18)

Forms (7)

L’esempio di scelta tra alternative visto prima con gli elementi di tipo radio pu` o essere realizzato in alternativa con una casella di scelta multipla (drop-down menu)

I

Si usa il tag <select> che ha un attributo name per specificare il nome della variabile da assegnare

I

Il tag <select> contiene una lista di tag <option>, uno per ogni possible valore tra cui scegliere

I

Ogni tag <option> ha un attributo value che ne specifica il valore corrispondente

< f o r m >

< s e l e c t n a m e = " t i t o l o " >

< o p t i o n v a l u e = " e l e m " > L i c e n z a E l e m e n t a r e < / o p t i o n >

< o p t i o n v a l u e = " m e d i a " > L i c e n z a M e d i a < / o p t i o n >

< o p t i o n v a l u e = " d i p l " > D i p l o m a < / o p t i o n >

< o p t i o n v a l u e = " l a u r e a " > L a u r e a < / o p t i o n >

< / s e l e c t >

< / f o r m >

(19)

Per ora abbiamo visto come raccogliere i dati dall’utente e associarli a variabili

Vediamo ora come inviare tali dati ad una applicazione eseguita sul server (o via email)

Per fare questo si utilizza un bottone “submit”, che si definisce tramite il tag <input> specificando il tipo submit

La presenza del bottone submit richiede che nel tag <form> siano impostati un paio di attributi:

I

action - specifica l’URL dell’applicazione sul server (o l’indirizzo email) a cui inviare i dati

I

method - pu` o essere impostato a get o post e specifica il tipo di messaggio HTTP da usare per inviare i dati.

F Nel caso di get i dati vengono aggiunti all’URL dell’applicazione

F Nel caso di post i dati vengono allegati nel corpo del messaggio HTTP

(20)

Forms (9)

Quando un bottone submit ` e presente in un form e viene premuto dall’utente, tutti i dati inseriti vengono associati alle corrispondenti variabili e inviate all’applicazione (o indirizzo email) indicata dall’attributo action

Nel caso il destinatario sia un’applicazione (e.g. PHP) si usa solitamente il metodo get, a meno che:

I

non si tratti di form molto complessi che renderebbero l’URL generata da get molto lunga

I

non si tratti di dati confidenziali: l’url di un pacchetto HTTP ha pi` u visibilit` a del suo contenuto (e.g. rimane nella history del browser)

(21)

Nell’esempio seguente (in cui si usa il metodo get), inserendo Paolo e Milazzo nei due campi e premendo Invia si redirige il browser alla pagina elenco telefonico.php?nome=Paolo&cognome=Milazzo

< f o r m a c t i o n = " e l e n c o _ t e l e f o n i c o . php " m e t h o d = " get " >

N o m e : < i n p u t t y p e = " t e x t " n a m e = " n o m e " / > < br >

C o g n o m e : < i n p u t t y p e = " t e x t " n a m e = " c o g n o m e " / > < br >

< i n p u t t y p e = " s u b m i t " v a l u e = " I n v i a " / >

< / f o r m >

(22)

Forms (11)

Nell’esempio seguente (in cui si usa il metodo post), inserendo Paolo e Milazzo nei due campi e premendo Invia viene inviata una mail all’indirizzo (di fantasia) dimmi il [email protected] contenente il seguente testo:

nome=Paolo cognome=Milazzo

Questo esempio mostra anche l’uso dell’attributo enctype di <form>

che contiene il tipo MIME dei dati trasmessi. Omettendolo il contenuto dell’email sarebbe nome=Paolo&cognome=Milazzo

< f o r m a c t i o n = " m a i l t o : d i m m i _ i l _ n u m e r o @ p a g i n e g i a l l e . it "

m e t h o d = " p o s t " e n c t y p e = " t e x t / p l a i n " >

N o m e : < i n p u t t y p e = " t e x t " n a m e = " n o m e " / > < br >

C o g n o m e : < i n p u t t y p e = " t e x t " n a m e = " c o g n o m e " / > < br >

< i n p u t t y p e = " s u b m i t " v a l u e = " I n v i a " / >

< / f o r m >

(23)

Altri elementi che possiamo includere in un form tramite il tag <input>:

Bottoni di che resettano il form (type="reset")

Elementi per l’upload di file (type="file"), con la possibilit` a di specificarne il tipo mime usando l’attributo accept

Valori nascosti (type="hidden")

Altri bottoni (type="button") che possono essere usati per eseguire parti dinamiche del documento, ossia script (che vedremo in seguito)

(24)

Uso di tabelle per strutturare i form

Per disporre gli elementi di un form in maniera ordinata nella pagina web si pu` o utilizzare una tabella

In particolare, una tabella consente di allineare gli elementi in verticale

< f o r m a c t i o n = " p r o v a . php " m e t h o d = get " >

< table >

< tr >

< td a l i g n = " r i g h t " > Nome </ td >

< td >

< i n p u t t y p e = " t e x t " n a m e = " n o m e " >

</ td >

</ tr >

< tr >

< td a l i g n = " r i g h t " > Cognome </ td >

< td > < i n p u t t y p e = " t e x t " n a m e = " c o g n o m e " > </ td >

</ tr >

< tr >

< td a l i g n = " r i g h t " > Et & a g r a v e ; </ td >

< td > < i n p u t t y p e = " t e x t " n a m e = " eta "

s i z e = " 4 " m a x l e n g t h = " 3 " > </ td >

</ tr >

< tr >

< td > </ td >

< td > < i n p u t t y p e = " s u b m i t " v a l u e = " i n v i a " > </ td >

</ tr >

</ table >

</ form >