HTML - francy59.altervista.orgfrancy59.altervista.org/pagine/html/HTML.pdf · Form • Elementi di...

HTML : esempi & utility

a cura del prof. Salvatore De Giorgi - 1 - In virtù delle leggi sul copyright e del diritto d’autore italiane ed internazionali, vi invitiamo a limitare l'utilizzo del materiale contenuto in questa dispensa ad un solo uso personale con scopi esclusivamente didattici e non commerciali. Le parti indicate con un link ad un sito si riferiscono a pagine di altri autori che come tali ne detengono i diritti.

HTML

Vari

• Struttura di un file HTML pag. 2

• Esempio della struttura di un sito pag. 3

• Impostare i dati in un link di tipo mailto pag. 6

• Testo scorrevole pag. 7

• Link ad una pagina con il tag <iframe> pag. 9

Tabelle

• Creazione di una tabella pag. 12

• Raggruppare gli stili delle colonne pag. 17

• Creazione di una tabella con bordi pag. 19

• Creare gruppi di righe in una tabella pag. 20

• Annidare le tabelle pag. 22

• Uso delle tabelle per incorniciare un testo pag. 23

• Utilizzo delle tabelle per impostare il layout di una pagina pag. 24

Form

• Elementi di un form pag. 26

• Esempi form pag. 38

• Esempio di form completo pag. 44

Struttura di un file HTML <!doctype html public "-//w3c//dtd html 4.01//en">

<html lang="it">

<head>

<title>Esempio di pagina Web</title>

<META NAME="keywords" CONTENT="HTML, Javascript, CSS, Esercizi">

<META NAME="description" CONTENT="Appunti ed Utility : laboratorio di sistemi per

il triennio dell’Istituto Tecnico Industriale – Indirizzo Informatica Abacus ">

<META NAME="revised" CONTENT="Salvatore DE GIORGI, 10 ottobre 2006">

</head>

<body>



</body>

</html>

il tag !DOCTYPE, consigliato dall'organismo internazionale W3C che si occupa di armonizzare l'utilizzo dell'HTML (non è obbligatorio), posto prima del tag di apertura del documento, fornisce informazioni di tipo generale. Non prevede il tag di chiusura e la sintassi è la seguente : <!DOCTYPE attributo1, attributo2,......attributoN > Significato degli attributi proposti nel tag precedente : - HTML PUBLIC indica che il documento usa il linguaggio di marcatura HTML ed è pubblico; - W3C indica che il documento segue le direttive proposte dal consorzio; - DTD HTML 4.01 è la versione di HTML usata nel documento; - EN indica che il documento è scritto con Tag in inglese (è fissa!) Il tag <html> indica l’apertura della pagina e lang=it indica che il contenuto della pagina è in italiano. Il Tag <head> è fondamentale nella struttura di un documento, indica l'intestazione della pagina ed è possibile includervi codice che deve essere eseguito prima del caricamento completo della pagina (es. script vari scritti con un linguaggio di scripting) Il Tag <title> permette di inserire un titolo nell'apposita barra blu del browser in alto. Il <body> rappresenta il corpo della pagina. I meta Tag, posti all’interno della <head> del documento servono per far classificare il sito dai motori di ricerca : il tag <META NAME="keywords"> consente di segnalare al motore di ricerca le parole chiavi con le quali associare ed indicizzare il documento web il tag <META NAME="description"> associa al documento HTML una breve descrizione che viene utilizzata dai motori di ricerca per illustrare i contenuti della pagina in modo essenziale il tag <META NAME="revised"> indica la data e l'autore dell'ultima revisione per il documento HTML



Esempio della struttura di un sito Percorsi assoluti (dal sito http://www.html.it)

Fino a quando ci si trova nella condizione di creare un sito web di dimensioni ridotte (poche pagine) si possono lasciare tutti i file in una medesima cartella. È evidente però che – man mano che il sito web cresce – si ha bisogno di un maggior ordine.

Si presenterà allora l’esigenza di inserire le immagini del sito in una cartelle diversa (in modo da averle tutte nella medesima locazione), e magari sarà opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo.

I siti web sono dunque organizzati in strutture ordinate.

Poiché l’organizzazione di un sito in directory e sottodirectory è una cosa normalissima, è opportuno imparare a muoversi tra i vari file che costituiscono il sito stesso, in modo da essere in grado di creare collegamenti verso i documenti più reconditi, destreggiandosi tra le strutture più ramificate.

Per farlo esistono due tecniche:

• indicare un percorso assoluto • indicare un percorso relativo

Nel caso in cui il documento a cui vogliamo puntare si trovi in una particolare directory del sito di destinazione, con i percorsi assoluti non abbiamo che da indicare il percorso per esteso.

Per creare un collegamento assoluto è sufficiente fare riferimento all’url che normalmente si vede scritto nella barra degli indirizzi. I percorsi assoluti si usano per lo più, quando si ha la necessità di fare riferimento a risorse situate nei siti di terze persone.

Esempi :

<a href = "C:\Programmi\EasyPHP1-7\www\htdocs\sito_appunti\pagine\pagina_centrale.htm">

<img src = "C:\Programmi\EasyPHP1-7\www\htdocs\sito_appunti\media\immagini\homepage.jpg">

Percorsi relativi

Spesso ci si trova tuttavia a fare riferimento a documenti situati nel proprio stesso sito, e – se si sta sviluppando il sito sul computer di casa (cioè "in locale") – magari non si ha ancora un indirizzo web, e non si sa di conseguenza come impostare i percorsi. È utile allora capire come funzionano i percorsi relativi.

I percorsi relativi fanno riferimento alla posizione degli altri file rispetto al documento in cui ci si trova in quel momento. Si possono verificare le seguenti condizioni :



link ad una pagina nella stessa directory :

<a href="paginaDaLinkare.htm">link ad una pagina nella stessa directory della pagina presente</a>

link ad una pagina in una sottodirectory :

<a href="prima/interna/paginaDaLinkare.htm">link ad una pagina in una sottodirectory</a>

link ad una pagina in una directory di livello superiore

<a href="../../index.htm”>link ad una pagina in una directory di livello superiore</a>

Come si vede, con i percorsi relativi valgono le seguenti regole generali:

Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file

<a href="paginaDaLinkare.html">collegamento alla pagina</a>

Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, basta nominare la cartella seguita dallo "slash", e poi il nome del file. Secondo la formula: cartella/nomeFile.html

<a href="prima/interna/interna.html">Visita la pagina interna</a>

Per tornare su di un livello, è sufficiente utilizzare la notazione: ../nomeFile.html

<a href="../../index.html">Visita la pagina interna</a>

Grazie a questi accorgimenti si può agevolmente navigare all’interno delle directory del sito: se ce ne fosse bisogno si può, per esempio, tornare su di un livello rispetto alla posizione del file, scegliere un’altra cartella, e poi scegliere un altro file:

../altraCartella/nuovoFile.html



Si propone, di seguito, l’esempio di una possibile struttura di un sito :

in cui :

la directory principale contiene le sottodirectory , e la pagina index.htm

la directory contiene tutte le pagine del sito ed una sottodirectory

contenente tutti gli script (javascript, css, ecc.) utilizzati dalle varie pagine;

la directory contiene le sottodirectory e contenenti, rispettivamente, i suoni e le immagini utilizzate dalle varie pagine del sito.

Esempi di riferimenti relativi :

dalla pagina index.htm alla pagina pagina1.htm :

<a href = "pagine/pagina1.htm "

dalla pagina index.htm ad una immagine nella sottodirectory :

<img src="media/immagini/immagine1.jpg">

da una pagina della directory ad una immagine nella sottodirectory

:

<img src ="../media/immagini/immagine1.jpg">



Impostare i dati in un link di tipo mailto

Per impostare i dati in un link di tipo malto: è necessario utilizzare i metodi di aggregazione dei dati che utilizzano, per default, i vari client di posta elettronica:

mailto: utilizzato per default per definire il destinatario principale della mail

Cc utilizzato per definire altri destinatari visibili a tutti gli altri

Bcc utilizzato per definire altri destinatari invisibili a tutti gli altri

Subject definisce l'oggetto della mail

Body definisce il corpo della mail

X-Priority definisce il grado di priorità della mail (bassa=Low, normale=Normal, alta=High) Questo parametro è valido solo per Microsoft Outlook Express. Altri client di posta elettronica, tra cui quelli di Netscape Navigator, utilizzano la dicitura Priority.

Per utilizzare i vari parametri è sufficiente accodarli di seguito nel link di tipo mailto:, come nel seguente esempio :

<a href="mailto:[email protected]? [email protected] & Subject=Oggetto della mail & Body=corpo della mail">EMail </a>



Testo scorrevole Il testo scorrevole si ottiene col il Tag <MARQUEE> la cui sintassi completa è:

<MARQUEE>…. testo o immagine…..</MARQUEE>

con i seguenti attributi :

SCROLLAMOUNT numero(in pixel) che indica la velocità relativa dello scorrimento (più è grande maggiore è la velocità di scorrimento del testo)

SCROLLDELAY determina la velocità di ritardo nello scorrimento, espressa in millisecondi (più è grande più è lenta l’animazione, ovvero l’intervallo di tempo che intercorre fra uno scorrimento del testo e quello successivo)

BEHAVIOR indica se il testo si sposta scorrendo (scroll) ovvero riapparendo ogni volta dal lato opposto a dove è comparso dallo schermo, scivolando (slide) ovvero fermandosi dopo lo scorrimento, oppure alternando (alternate) ovvero in modo che il testo continua a rimbalzare avanti ed indietro tra i due margini. Il valore di default è : scroll

DIRECTION indica la direzione in cui il testo scorrevole di sposta : right, left, up, down. Il valore di default è : left (da destra verso sinistra).

LOOP indica per quante volte si deve spostare il testo; per continuare lo spostamento assegnare il valore -1 (valore di default). Es. LOOP=2 : il testo scorre due volte

BGCOLOR è il colore di sfondo del testo scorrevole

HEIGHT, WIDTH indicano la dimensione occupata dal testo scorrevole in pixel o in percentuale della dimensione dello schermo. Se non specificate si adattano alla dimensione del testo in scorrimento (in altezza) occupando tutta la riga dello schermo (in lunghezza)

HSPACE,VSPACE indicano (in pixel) la distanza tra i bordi dell’area del testo scorrevole con il resto della pagina. HSPACE dal margine sinistro della pagina, VSPACE dal margine superiore.

ALIGN Imposta come vengono allineati il testo e gli altri elementi adiacenti all’area del testo; i valori sono :top, middle, bottom

Nota : il tag <MARQUEE> è gestito solo da Internet Explorer



Esempio 1 :

<marquee scrollamount ="2" scrollDelay="5" behavior="alternate" direction ="right" loop= "2" bgcolor="#FFFF66" height = "100px" width= "300px" hspace ="200px" vspace ="100px">Testo scorrevole </marquee>

in questo caso il testo si muoverà, con le velocità impostate, cominciando da sinistra verso destra in maniera alternata, per due volte, con uno sfondo giallo (#FFFF66), in una barra alta 100 pixel e larga 300 pixel, con 200 pixel di margine sinistro e 100 pixel dal margine superiore. Esempio 2 :

<font face = "comic sans ms" size="6" color="blue"> <marquee scrollamount ="2" scrollDelay="5" bgcolor="#FFFF66" width= "500">Testo scorrevole </marquee> </font>

in questo caso il testo si muoverà, con le velocità impostate, cominciando da destra verso sinistra (per default in quanto l’attributo DIRECTION non è specificato), in maniera continuativa (LOOP non specificato), con uno sfondo giallo (#FFFF66), in una barra alta sufficientemente per contenere il testo (HIGHT non specificato) e larga 500 pixel. La distanza dal margine sinistrao e superiore è nulla (HSPACE e VSPACE non specificati). Con il tag <font>, inserito prima del tag <marquee>, è possibile formattare il testo scorrevole



utilizzandone i relativi attributi.

Link ad una pagina con il tag <iframe> Si supponga che la pagina index.htm abbia il seguente layout :

utilizzando il tag <iframe> è possibile effettuare un link ad una pagina visualizzandola, per

es., nella parte destra del layout progettato.

In questo esempio cliccando sulla voce Link viene visualizzata la pagina pagina_iframe.htm

che, come si può notare nella figura seguente, contiene la descrizione della sintassi del tag

<iframe> ed i relativi attributi.


Il codice corrispondente alla pagina index.htm è il seguente :




<html> <head> <title></title> </head> <body> <font face="comic sans ms"> <table width="80%" border="2" align="center"> <tbody align="center"> <tr height="50px"> <td bgcolor="red" colspan="2"> <font size ="4"><b>Esempio di link ad una pagina con il tag &ltiframe&gt</b> </font> </td> <tr> <tr height="600px"> <td bgcolor="cyan" width="20%" > <font size ="5" color ="darkred"> <a href="pagine/pagina_iframe.htm" target="centro">Link</a> <a href="pagine/tabellaASCII_estesa.htm" target="centro">Link 2</a> </font> </td> <td width="80%"> <IFRAME name="centro" align="center" src="pagine/pagina_centro.htm" frameBorder="0" scrolling="no" width="100%" height="680px" marginwidth="20" marginheight="20"> </IFRAME> </td> <tr> <tr height="40px"> <td bgcolor="lightgreen" colspan="2"> <font face ="Tahoma" size ="2"> <p align="justify"> In virtù delle leggi sul copyright e del diritto d’autore italiane ed internazionali, vi invitiamo a limitare l'utilizzo degli esempi proposti ad un solo uso personale con scopi esclusivamente didattici e non commerciali. E' proibita, inoltre, la riproduzione totale o parziale in qualsiasi forma e con qualsiasi mezzo. </p> </font> </td> <tr> </tbody> </table> </font> </body> </html>



Tabelle

Creazione tabella Per disegnare una tabella è necessario utilizzare tre tag fondamentali :

<TABLE> </TABLE>

inizio e fine tabella

<TR> </TR>

delimita l’inizio e la fine di una riga

<TD> </TD>

delimita l’inizio e la fine di casella, rappresenta la singola casella di cui è formata la tabella

Per costruire una tabella si possono utilizzare i seguenti attributi :

ALIGN “center”, “left”, “right”. Utilizzato con il tag <TABLE> consente di allineare la tabella all’interno della pagina. Utilizzato con il tag <TD> consente di allineare il testo all’interno della casella. Valore di default : left.

VALIGN “top”, “middle”, “bottom”. Utilizzato con il tag <TD> consente di effettuare l’allineamento verticale in una casella (è opportuno modificare l’altezza della riga). Valore di default : middle.

BORDER specifica lo spessore del bordo della tabella. Il valore di default, per il quale i bordi non sono visibili, è “0”.

HEIGHT, WIDTH

servono a specificare le dimensione della tabella in altezza e larghezza (se non specificati la tabella si adatta al contenuto presente nelle caselle). Gli attributi possono essere utilizzati anche per definire l’altezza di una riga o la lunghezza di una singola cella. Occorre, però, tener presente che le caselle di una stessa riga non possono avere altezze diverse e che le caselle si una stessa colonna non possono avere larghezze diverse altrimenti la tabella di adatta alla rispetto alla casella più larga e a quella più alta. L’ampiezza della tabella può essere espressa sia in pixel che in percentuale. Esprimendo la dimensione in pixel si ottiene una tabella fissa, che non muta la propria dimensione né a causa delle dimensioni della finestra del browser né per la risoluzione del monitor; utilizzando valori espressi in percentuale, si ha una tabella variabile e la sua dimensione si adatta sia alla dimensioni della finestra del browser sia alla risoluzione del monitor.

BGCOLOR consente di specificare il colore di sfondo di una tabella o di una singola cella

BACKGROUND consente di inserire un’immagine come sfondo di una tabella o di una singola cella.

COLSPAN attributo del tag <TD> : consente di unire più celle in orizzontale. I tag <TD> e </TD> delle celle da unire non devono essere presenti nel codice.

ROWSPAN attributo del tag <TD> : consente di unire più celle in verticale. I tag <TD> e </TD> delle celle da unire non devono essere presenti nel codice.

CELLSPACING attributo del tag <TABLE> : consente di definire la distanza fra le varie celle della tabella.

CELLPADDIG attributo del tag <TABLE> : consente di definire la distanza tra il bordo della tabella ed il suo contenuto.



Esempio 1 : Creazione di una tabella allineata al centro, con una larghezza uguale al

50% del video, con due righe e tre colonne.

<table align ="center" border="3" width= "50%"> <tr> <td>rigo 1 colonna 1</td> <td>rigo 1 colonna 2</td> <td>rigo 1 colonna 3</td> </tr> <tr> <td>rigo 2 colonna 1</td> <td>rigo 2 colonna 2</td> <td>rigo 2 colonna 3</td> </tr> </table>

Esempio 2 : Creazione di una tabella allineata al centro, con una larghezza uguale al 60% del video, con due righe e tre colonne. La prima riga deve essere alta 50 pixel, la seconda 100. La prima colonna deve essere larga il 20% dell’intera tabella, la seconda il 50% (non occorre, ovviamente, specificare la terza colonna!)

<table align ="center" border="3" width= "60%"> <tr height = "50px"> <td width="20%">rigo 1 colonna 1</td> <td width="50%">rigo 1 colonna 2</td> <td>rigo 1 colonna 3</td> </tr> <tr height = "100px"> <td width="20%" >rigo 2 colonna 1</td> <td width="50%">rigo 2 colonna 2</td> <td>rigo 2 colonna 3</td> </tr> </table>



Esempio 3 : utilizzo degli attributi per effettuare l’allineamento orizzontale e verticale di una singola cella, per definire i colori e le immagini dello sfondo sia

della tabella che di una singola cella.

<table align ="center" border="3" width= "60%" bgcolor ="cyan" background="carta.gif"> <tr height = "50px"> <td width="20%" bgcolor="red" align="center">rigo 1 colonna 1</td> <td width="50%" align ="right">rigo 1 colonna 2</td> <td>rigo 1 colonna 3</td> </tr> <tr height = "100px"> <td width="20%" valign="top">rigo 2 colonna 1</td> <td width="50%" background="libro.gif">rigo 2 colonna 2</td> <td bgcolor="yellow" valign="bottom">rigo 2 colonna 3</td> </tr> </table>

Esempio 4 : unione di righe e colonne (rowspan)



<table align ="center" border="3" width= "60%"> <tr height = "50px"> <td align="center" colspan="2">Dipendente</td> <td rowspan="2">Indirizzo</td> </tr> <tr height = "100px"> <td>Cognome</td> <td>Nome</td> </tr> <tr height = "100px"> <td>BIANCHI</td> <td>GIOVANNI</td> <td>Via Pinco pallino, 3</td> </tr> </table>

Notare l’impostazione (in questo esempio errata) della tabella ottenuta con il seguente codice :

<table align ="center" border="3" width= "60%"> <tr height = "50px"> <td align="center" rowspan="2">Dipendente</td> <td colspan="2">Indirizzo</td> </tr> <tr height = "100px"> <td>Cognome</td> <td>Nome</td> </tr> <tr height = "100px"> <td>BIANCHI</td> <td>GIOVANNI</td> <td>Via Pinco pallino, 3</td> </tr> </table>



Esempio 5 : uso degli attributi cellspacing e cellpadding

<table align ="center" border="3" width= "60%" cellspacing= "50" cellpadding = "20"> <tr height = "50px"> <td align="center" colspan="2">Dipendente</td> <td rowspan="2">Indirizzo</td> </tr> <tr height = "100px"> <td>Cognome</td> <td>Nome</td> </tr> <tr height = "100px"> <td>BIANCHI</td> <td>GIOVANNI</td> <td>Via Pinco pallino, 3</td> </tr>

</table>



Raggruppare gli stili delle colonne Oltre a raggruppare le righe e le colonne di una tabella è anche possibile raggruppare gli stili delle colonne. Il tag <colgroup> consente di impostare un layout unico per le colonne senza avere la necessità di specificare allineamento del testo, o il colore di sfondo per ogni singola cella. Il tag <colgroup> - la cui chiusura è facoltativa - va posto subito dopo il tag <caption> e prima di <thead> (se utilizzati), altrimenti dopo il tag <table>. Con l’attributo span è possibile impostare il numero di colonne che fanno parte del gruppo. Questo tag, purtroppo, non funziona ancora correttamente con tutti i browser.

Supponiamo di voler ottenere il seguente layout

in cui la seconda e la terza colonna della tabella hanno gli stessi attributi : Il risultato si può, ovviamente, ottenere senza utilizzare il tag <colgroup>, ripetendo per ciascuna cella gli attributi corrispondenti :

<table width="50%" border="1"> <tr height ="50px"> <td width="20%" bgcolor="red" align="left" valign ="top">1</td> <td width="40%" bgcolor="yellow" align="right" valign ="bottom">2</td> <td width="40%" bgcolor="yellow" align="right" valign ="bottom">3</td> </tr> <tr height ="30px"> <td width="20%" bgcolor="red" align="left" valign ="top">1</td> <td width="40%" bgcolor="yellow" align="right" valign ="bottom">2</td> <td width="40%" bgcolor="yellow" align="right" valign ="bottom">3</td> </tr> <tr height ="60px"> <td width="20%" bgcolor="red" align="left" valign ="top">1</td> <td width="40%" bgcolor="yellow" align="right" valign ="bottom">2</td> <td width="40%" bgcolor="yellow" align="right" valign ="bottom">3</td> </tr> </table>



Con il seguente codice, notevolmente più semplice, si ottiene lo stesso risultato anche se allo stato attuale ha lo svantaggio di non essere supportato dal maggior numero di browser:

<table width="50%" border="1"> <colgroup width="20%" bgcolor="red" align="left" valign ="top"></colgroup> <colgroup span="2" width="40%" bgcolor="yellow" align="right" valign ="bottom"> <tr height ="50"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr height ="30"> <td>1</td> <td>2</td> <td>3</td> </tr> <tr height ="60"> <td>1</td> <td>2</td> <td>3</td> </tr> </table>

Creazione di una tabella con bordi

• la proprietà bordercolor permette di assegnare un colore a tutto i bordo; • la proprietà bordercolordark alla parte a destra in basso; • la proprietà bordercolorlight alla parte in altro a sinistra

Nota : questi attributi funzionano correttamente solo con Internet Explorer

Esempio :

<table bordercolordark="blue" bordercolorlight="red" border="10" width="100%" bgcolor="Cyan">  <td align="center" BGCOLOR="Yellow" height = "40" ><b>Cognome</b> <td align="center" BGCOLOR="Yellow"><b>Nome</b> <td align="center" BGCOLOR="Yellow"><b>Telefono</b> <td align="center" BGCOLOR="Yellow"><b>Indirizzo</b> <td align="center" BGCOLOR="Yellow"><b>Comune</b> <td align="center" BGCOLOR="Yellow"><b>Regione</b>

<table bordercolordark="red" bordercolorlight="blue" border="20" width="50%" bgcolor="Cyan">  <td align="center" BGCOLOR="Yellow" height = "40" ><b>Cognome</b> <td align="center" BGCOLOR="Yellow"><b>Nome</b> <td align="center" BGCOLOR="Yellow"><b>Telefono</b> <td align="center" BGCOLOR="Yellow"><b>Indirizzo</b> <td align="center" BGCOLOR="Yellow"><b>Comune</b> <td align="center" BGCOLOR="Yellow"><b>Regione</b>  <tr> <td>Bianchi <td>Giovanni <td>099/5589964 <td>Via Garibaldi, 5 <td>Taranto <td>Puglia </tr>



Creare gruppi di righe in una tabella

Per organizzare logicamente una tabella si possono usare dei tag (opzionali) che consentono di capire facilmente quali siano le diverse parti della tabella.

Per individuare facilmente i gruppi di righe sono stati introdotti i seguenti tag:

<caption> è l’intestazione, il titolo con un commento esplicativo sulla tabella

<thead> è l'intestazione, la parte iniziale della tabella, quella che contiene ad esempio indicazioni sul contenuto delle celle

<tfoot> è il piede, la conclusione della tabella, quella che consente ad esempio di tirare le somme

<tbody> è il corpo, la parte centrale con il contenuto vero e proprio della tabella

Le celle all’interno del tag <thead> possono essere indicate con <th> (“table

header”), al posto del consueto <td> (“table data”). In questo caso il contenuto delle celle è automaticamente formattato in grassetto e centrato.

Il tag <tfoot> che chiude la tabella, è anteposto rispetto al <tbody>. Esempio :

Il codice corrispondente è il seguente :



<table width="50%" border="2" align="center"> <caption> <b>Contabilità azienda “Tuttogratis” </b> </caption> <thead> <tr> <th width="30%">Semestre</th> <th width="35%">Entrate</th> <th width="35%">Uscite</th> </tr> </thead> <tfoot> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td ><b>Totale</b></td> <td >350.000</td> <td >230.000</td> </tr> </tfoot> <tbody> <tr> <td >Primo</td> <td >200.000</td> <td >120.000</td> </tr> <tr> <td >Secondo</td> <td >150.000</td> <td >110.000</td> </tr> </tbody> </table>

Annidare le tabelle È possibile annidare le tabelle le une dentro le altre come nel seguente esempio (il colore dei bordi è puramente indicativo per distinguere le varie tabelle:

il codice corrispondente è il seguente :

 <table width="50%" border="4" bordercolor ="red">  <tr> <td height ="30" colspan="2">  <table width="80%" border="1" align="center" bordercolor="blue"> <tr> <td width="30%"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </td> </tr>  <tr>  <td height="50"> </td>  <td>  <table width="100%" border="1" bordercolor="green"> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </td> </tr> </table>



Uso delle tabelle per incorniciare un testo E’ sufficiente impostare una tabella di una sola riga e di una sola colonna, con larghezza, altezza, ed altri attributi appropriati.

il codice corrispondente è :

<table borderColor="blue" cellSpacing=0 cellPadding=20 width="50%" border="4"> <tr> <td align="center"> Testo racchiuso da una cornice e spaziato tutto intorno di 20 pixel </td> </tr> </table>

dove il testo risulta :

• bordato di blue - bordercolor=blue • senza spazi fra il bordo della colonna e il bordo della tabella - cellSpacing=0 • con uno spazio tra il testo e il bordo di 20 pixel - cellPadding=20 • centrato - align=center • occupa una larghezza del 50% della pagina - width="50%" • lo spessore del bordo è di 4pixel - border=4


<table borderColor=blue cellSpacing="10" cellPadding="30" width="20%" border=4> <tr> <td bordercolor=red align=center> Testo racchiuso da una doppia cornice e spaziato tutto intorno di 30 pixel </td></tr> </table>

dove :

• lo spazio fra i due bordi è stato ottenuto attraverso l'attributo cellSpacing (in questo caso, cellspacing=10)

• all'interno del tag <td> è stato dichiarato il colore del bordo interno (nell'esempio, è stato scritto<td bordercolor=red>)



Utilizzo delle tabelle per impostare il layout di una pagina La flessibilità di uso delle tabelle le rende anche adatte per costruire il layout(disposizione) di una pagina web. Utilizzando o meno i bordi, le tabelle diventano dei contenitori in cui poter inserire i vari oggetti (testo, immagini, elenchi, pulsanti, ecc.) che compongono la pagina. Si supponga di voler realizzare una pagina web con il seguente layout :

Il codice per realizzare la pagina in figura è il seguente :

<font face="comic sans ms"> <table width="90%" border="2" align="center"> <tbody align="center"> <tr height = "100px"> <td bgcolor="red" colspan="2"> <font size ="5"><i><b>Intestazione della pagina</i></b></font> </td> <tr> <tr height="500px"> <td bgcolor="cyan" width="20%" > <font size ="4" color ="darkred">Indice <br>della<br> pagina</font> </td> <td bgcolor="yellow" width="80%" > <font size ="6" color ="blue"><b>Contenuto<br> della<br> pagina</b></font> </td> <tr> <tr height = "50px> <td bgcolor="lightgreen" colspan="2"> <font size ="5"><i><b>Pi&egrave di pagina</i></b></font> </td> <tr> </tbody> </table> </font>



La pagina web con il seguente layout

può essere realizzata con il codice :

<font face="comic sans ms"> <table width="90%" border="2" align="center"> <tbody align="center"> <tr height = "100px"> <td bgcolor="red" colspan="3"> <font size ="5"><i><b>Intestazione della pagina</i></b></font> </td> <tr> <tr height= "500px"> <td bgcolor="cyan" width="20%" > <font size ="4" color ="darkred">Colonna<br>sinistra</font> </td> <td bgcolor="yellow" width="60%" > <font size ="6" color ="blue"><b>Contenuto<br>della<br>pagina</b></font> </td> <td bgcolor="cyan" width="20%" > <font size ="4" color ="darkred">Colonna<br>destra</font> </td> <tr> <tr height = "50px"> <td bgcolor="lightgreen" colspan="3"> <font size ="5"><i><b>Pi&egrave di pagina</i></b></font> </td> <tr> </tbody> </table> </font>



Elementi che compongono i form

(dal sito www.html.it) Uno dei fattori che ha decretato il successo del Web è senz'altro la possibilità di interagire: la possibilità cioè di iscriversi a servizi di vario tipo (ad esempio mailing list), di partecipare a vere e proprie comunità virtuali (forum), di compilare questionari, prenotazioni, ordinazioni, immissione dati ed un’ampia varietà di altre applicazioni.

Per organizzare questo genere di servizi è necessario raccogliere in qualche modo i dati dell'utente: per farlo si utilizzano, in maniera molto semplice, i moduli (cioè i form).

L'invio dei dati è solitamente organizzato in due parti:

• una pagina principale che contiene i vari campi dei form, che consentono all'utente di effettuare delle scelte, scrivere del testo, inserire un'immagine, ecc;

• una pagina secondaria che viene richiamata dalla principale e che effettua "il lavoro" vero e proprio di processare e raccogliere i dati. Di norma si tratta di una pagina di programmazione che si trova sul server. Può essere un cgi, oppure una pagina asp, php, jsp.

In questo paragrafo ci occuperemo della sola pagina principale.

(dal sito www.web-link.it) Un modulo (form) può essere costituito da diversi elementi quali: caselle per l'introduzione dei dati, menù a tendina dove effettuare scelte preimpostate, caselle di selezione multipla tipo spunta, radio caselle per singole o multiple selezioni, aree di testo più o meno ampie per raccogliere commenti e descrizioni, caselle nascoste per password, pulsanti di invio, pulsanti di annullamento o reset.

I forms possono essere utilizzati per svariate forme di comunicazione, il solo codice html ha però delle limitazioni, nel senso che non è possibile effettuare controlli sui dati introdotti e meno ancora interagire con le scelte dell'utente che li compila.

Queste limitazione sono però superabili adoperando in abbinamento un qualsiasi linguaggio di programmazione (scripting) come: php, asp, javascript, con i quali è possibile ricevere o inviare dati a/da pagine diverse, eseguire operazioni matematiche, effettuare controlli sui dati introdotti, anche di tipo piuttosto complesso come verificare se un campo destinato a ricevere un indirizzo e-mail è stato compilato correttamente, se ad esempio al suo interno si è dimenticata la @ che sappiamo essere fondamentale per un indirizzo di posta elettronica e molto altro ancora. Un modulo si definisce, in un documento HTML, con tag <form> : tutto quello che sarà inserito al suo interno e fino alla chiusura </form> farà parte del modulo e come tale seguirà le azioni previste nel modulo stesso. L'elemento (tag) form che dichiara il modulo da solo dice poco e niente, necessita di alcuni attributi, almeno due per essere spedito: action e method ed un terzo opzionale id che servono rispettivamente:

action per indirizzare il modulo al server, all' URL, al CGI o all'indirizzo di posta elettronica. method per dichiarare con quale dei due possibili metodi: post o get si devono trasmettere i dati.

http://www.html.it/

http://www.web-link.it/



(dal sito www.html.it) Con il metodo GET la pagina di risposta viene contattata e i dati vengono inviati in un unico step. Nell'URL della pagina di risposta potremo allora vedere tutti i parametri nella barra degli indirizzi (più precisamente nella "query string", cioè nella "stringa di interrogazione") secondo questa forma:

paginaRisposta.php?nome=Wolfgang&cognome=Cecchin&datiInviati=prova+invio

i dati (nella forma nome del campo = valore del campo) sono appesi alla pagina dopo il punto interrogativo.

Alcuni server hanno tuttavia hanno delle limitazioni per quel che riguarda il metodo GET e non consentono di inviare form con valori superiori a 255 caratteri complessivi. Il metodo GET è dunque particolarmente indicato per form con pochi campi e pochi dati da inviare. La sintassi per l'invio in get è:

<form name="datiUtenti" action="paginaRisposta.php" method="GET">

Nel metodo POST invece l'invio dei dati avviene in due step distinti: prima viene contattata la pagina sul server che deve processare i dati, e poi vengono inviati i dati stessi. Per questo motivo i parametri non compaiono nella query string (dunque se non si desidera che i parametri siano mostrati all'utente questo metodo è preferibile).

In questo caso non ci sono limiti sulla lunghezza dei caratteri. La sintassi è:

<form name="datiUtenti" action="paginaRisposta.php"method="POST">

(dal sito www.web-link.it)

id indica il nome assegnato al modulo, diventa indispensabile facendo uso di JavaScript o altro linguaggio di programmazione che diversamente non saprebbe a quale modulo fare riferimento nella pagina web. Per ragioni di compatibilità con html precedenti si fa uso anche di name che deve avere lo stesso dato di id.

Così come si è visto con le tabelle dove il solo <table> serviva per creare la struttura affidando a <tr> e <td> il compito di creare righe e colonne, nel form è indispensabile almeno un elemento input che a seconda dell'attributo type ad esso associato diventa un campo di testo da compilare (text), un pulsante per spedire (submit) un pulsante per resettare (reset) o altro ancora.

Esempio :

<body> <form action="pagina.html" method="post" id="miomodulo" name="miomodulo"> <label for="parere">Inserisci il tuo parere:</label> <input type="text" id="parere" name="parere" size="20" /> <input type="submit" value="Invia" /> <input type="reset" value="Cancella" /> </form></body>

http://www.html.it/

http://www.web-link.it/



Si tratta di un ipotetico modulo per ricevere un parere e di seguito viene presentato il risultato a video:

Analisi delle istruzioni che compongono il form : form definisce il modulo. action (pagina.html) richiama una pagina che in questo caso è in html e come tale impossibilitata ad elaborare dati o prendere decisioni (sarebbe possibile con pagine in ASP o in PHP). method (post) il metodo usato per la spedizione. id (miomodulo) il nome dell'oggetto modulo al quale poter fare riferimento nel caso in cui servisse; label for l'etichetta che identifica il campo (parere); input type="text" id="parere" size="20" un campo di tipo testo (text) con id parere (lo sesso specificato in label for) size 20 sono le dimensioni del campo a video; input type="submit" value="Invia" un pulsante di spedizione (submit) con scritta (value) invio. input type="reset" value="Cancella" un pulsante di tipo annulla (reset) con scritta (value) cancella. Da notare che il campo parere e i due pulsanti invia e cancella sono stati tutti creati dallo stesso elemento input cambiando semplicemente il valore del suo attributo type. Per dovere di informazione questi i valori che è possibile assegnare, sono in ordine alfabetico: Checkbox, Button, File, Hidden, Image, Password, Radio, Reset, Submit, Text.

(dal sito www.webfract.it)

Attraverso i moduli è possibile ottenere varie informazioni dall'utente. L'utente deve riempire i campi di input, che sono di vario tipo.

http://www.webfract.it/


L'utente può inserire dei dati in caselle di testo... <input type="text">

a cuIn virtdispenpagine

operare delle scelte che si escludono a vicenda... <input type="radio">
oppure operare scelte multiple....<input type="checkbox">
scegliere una tra più opzioni in un elenco a discesa... <select> <option value="1"> voce1</option> <option value="2">voce2</option> <option value="3">voce3</option> </select>

avere uno spazio predefinito dove inserire delle righe di testo oppure copiare qualcosa... <textarea rows="6" cols="40">

inviare i dati oppure cancellare quanto è stato scritto. <input type="submit" value="invia"> <input type="reset" value="cancella">

ra del prof. Salvatore De Giorgi - 29 - ù delle leggi sul copyright e del diritto d’autore italiane ed internazionali, vi invitiamo a limitare l'utilizzo del materiale contenuto in questa sa ad un solo uso personale con scopi esclusivamente didattici e non commerciali. Le parti indicate con un link ad un sito si riferiscono a di altri autori che come tali ne detengono i diritti.


aIdp

Elementi per inserire testo (dal sito www.html.it) Per consentire all'utente di inserire del testo è possibile utilizzare un text (campo testo). Se il campo è su una singola linea la sintassi è:

<input type="text" name="txtTesto" value="qui il tuo testo" size="40" maxlength="30" />

qui il tuo testo

"maxlenght" indica il numero massimo di caratteri che l'utente può inserire, con "size" si esprimono invece le dimensioni del campo di testo (la larghezza è data dal numero di caratteri).

Se si ha la necessità di indicare un campo che consenta di inserire una grande quantità di testo conviene invece utilizzare una "textarea" ("area di testo"). Ecco la sintassi:

qui puoi scrivere il tuo testo

"c Cl Ei c

Dsa

I c

o

<textarea name="txtaTesto" rows="5" cols="40"> qui puoi scrivere il tuo testo </textarea>

cura del prof. Salvatore De Giorgi - 30 -

n virtù delle leggi sul copyright e del diritto d’autore italiane ed internazionali, vi invitiamo a limitare l'utilizzo del materiale contenuto in questa ispensa ad un solo uso personale con scopi esclusivamente didattici e non commerciali. Le parti indicate con un link ad un sito si riferiscono a agine di altri autori che come tali ne detengono i diritti.

rows" indica il numero di righe della textarea, "cols" il numero di caratteri (cioè di colonne) he ogni riga può contenere.

ome si può vedere, se si vuol indicare del testo predefinito in questo caso bisogna inserirlo fra 'apertura e la chiusura del tag.

siste infine il campo password che mostra degli asterischi (o palline) al posto dei caratteri nseriti :

<input type="password" maxlength="8" size="18" value="" name="pswTesto" />

he dà:

********

a notare che la codifica fornisce una protezione soltanto per chi eventualmente stia sbirciando ul monitor dell'utente. L'invio dei dati attraverso il web avviene, se non vengono adottate ltre misure di sicurezza, 'in chiaro'.

campi di testo possono essere anche di sola lettura. Ad esempio:

<input readonly="readonly" size="25" value="leggere l'informativa" name="txtTesto" />

he dà:

leggere l'informativa

disabilitati :

http://www.html.it/



<input disabled="disabled" size="25" value="leggere l'informativa" name="txtTesto" /> cioè :

I bottoni (sumbit, reset, button)

La sintassi tradizionale per creare un bottone di invio è:

<input type="submit" value="invia i dati">

Ad esempio:

<input type="submit" value="visita HTML.it">

genera il seguente pulsante :

Un altro bottone utile è il "reset" che - una volta premuto - consente di riportare il form allo stato originario, cancellando ogni cosa scritta finora dall'utente. Ecco un esempio:

<input type="text"><br> <input type="reset" value="cancella">

Esiste infine un tipo di bottone generico, che non esegue nessuna azione particolare, ma che può essere ad esempio utilizzato per associare degli eventi tramite JavaScript :

<input type="button" value="bottone generico">



Con l'HTML 4 è stato introdotto il tag <button> che offre la possibilità di creare dei bottoni con un aspetto particolarmente ricco. Il tag <button>, a differenza del tag <input>, dà la possibilità di inserire il testo del bottone tra l'apertura e la chiusura del tag medesimo. Questo ci consente di specificare anche del codice HTML all'interno del tag.

Ed ecco un esempio complesso:

<button name="vai" type="submit">invia <img src="puntoEsclamativo.gif" width="23" height="67" title="invia adesso" border="1" vspace="5" alt="invia adesso" align="middle"> <b>invia adesso</b> </button>

che dà:

Consentire delle scelte (checkbox, radio, select) Checkbox

Con le checkbox si può consentire all'utente di operare delle scelte multiple. Ad esempio:

<fieldset> <legend>Linguaggi conosciuti</legend><br> <input type="checkbox" name="html" value="html"/> html <br> <input type="checkbox" name="css" value="css"/> css <br> <input type="checkbox" name="javascript" value="javascript"/> JavaScript </fieldset>

si ottiene :



Si possono anche selezionare uno o più valori di default:

<input type="checkbox" name="html" value="html" checked="checked" />

ed è anche possibile disabilitare una casella:

<input type="checkbox" name="html" value="html" disabled="disabled" />

Radio button

I "radio button" ("bottoni circolari") invece consentono di effettuare una scelta esclusiva. In questo caso quindi una scelta esclude l'altra. Per ottenere questo effetto i campi devono avere lo stesso nome e differente valore:

<fieldset> <legend>Linguaggi conosciuti</legend> HTML<input type="radio" name="linguaggio" value="html"/> CSS <input type="radio" name="linguaggio" value="css"/> JavaScript <input type="radio" name="linguaggio" value="javascript"/> </fieldset>

che viene così visualizzato:

Anche in questo caso è possibile assegnare un valore di default o disabilitare un pulsante. <input type="radio" name="linguaggio" value="html" checked="checked" disabled="disabled" /> Menu di opzioni (select)

Grazie al tag <select> è possibile costruire dei menu di opzioni. In questo caso ciascuna voce deve essere compresa all'interno del tag <option> (la chiusura del tag è opzionale) e il valore deve essere specificato attraverso l'attributo "value". Con l'attributo "selected" si può indicare una scelta predefinita:

<fieldset> <legend>Siti per webmaster</legend> <select name="siti" > <option value="http://www.html.it" selected="selected">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> </select> </fieldset>



che dà luogo a:

Siccome i menu di scelta tendono a diventare particolarmente lunghi, nell'HTML 4 è stato introdotto il tag <optgroup> che consente di suddividere le varie possibilità di scelta in gruppi tramite l'utilizzo di apposite etichette. Ecco l'esempio:

<select name="siti" > <optgroup label="siti per webmaster"> <option value="http://www.html.it">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> </optgroup> <optgroup label="risorse per webmaster"> <option value="http://font.html.it">font.html.it </option> <option value="http://cgipoint.html.it">cgipoint.html.it </option> </optgroup> </select>

che dà luogo al seguente menu:

Infine con il tag select è possibile impostare anche delle scelte multiple. Come si può vedere, utilizzando l'attributo "multiple" l'aspetto del tag select cambia notevolmente:

<label>Quale siti visiti?<br> <select name="siti" multiple="multiple"> <option value="http://www.html.it">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> <option value="http://font.html.it">font.html.it </option> <option value="http://cgipoint.html.it" >cgipoint.html.it </option> </select> </label>



Utilizzando il tasto "ctrl" l'utente può così effettuare delle scelte multiple.

Tramite l'attributo "size" si può specificare il numero delle voci che devono comparire nel menu, e conseguentemente regolare l'altezza del menu, aggiungendo o togliendo la barra di scorrimento verticale.

<label>Quale siti visiti?<br> <select name="siti" size="5" multiple="multiple"> <option value="http://www.html.it">www.html.it </option> <option value="http://freephp.html.it">frephp.html.it </option> <option value="http://freasp.html.it">freasp.html.it </option> <option value="http://font.html.it">font.html.it </option> <option value="http://cgipoint.html.it" >cgipoint.html.it </option> </select> </label>

che viene così visualizzato:

Altri campi

Si può avere la necessità di passare dei parametri "di servizio", senza far percepire la loro presenza all'utente. In questo caso possiamo utilizzare dei campi nascosti, presenti all'interno del form ma invisibili all'utente (ricordiamoci sempre di specificare la coppia "nome-valore"):

<input type="hidden" name="urlDiProvenienza" value="www.html.it">

Il campo "file", consente invece di inviare un file sul server, nel caso in cui la pagina di risposta sia stata programmata correttamente. La sintassi è:

<input name="fileUtente" type="file" size="20">

che dà:

"size" indica la larghezza del campo. Come si può vedere, a fianco del modulo compare il pulsante "sfoglia" o "browse" (a seconda della lingua del browser dell'utente).



Denominazione degli elementi Utilizzando script può essere necessario usare entrambi gli attributi name e id degli elementi

di un form e, quindi, è opportuno settarli.

I due attributi devono avere lo stesso valore eccetto i radio-buttons o i checkboxes. Questi

elementi devono avere lo stesso attributo name ma un unico attributo id. Per esempio, il

codice :

<body> Linguaggi conosciuti: <br><br> <input type="checkbox" name="chkLinguaggio" id="ling1" value="1"/> <label for="ling1">C++</label> <input type="checkbox" name="chkLinguaggio" id="ling2" value="2" /> <label for="ling2">HTML</label> <input type="checkbox" name="chkLinguaggio" id="ling3" value="3" /> <label for="ling3">Java</label> </body>

produce il seguente risultato :

Tutti gli altri elementi devono avere lo stesso valore per l’attributo name e l’attributo id, come nel seguente esempio :

<label for="txtCognome">Cognome</label> <input type="text" name="txtCognome" id="txtCognome"> <label for="txtNome">Nome</label> <input type="text" name="txtNome" id="txtNome">



Labels Usando script che fanno riferimento agli elementi di un form, può essere necessario abbinare

una label a ciascun input del form in quanto eventuali messaggi d’errore possono far

riferimento alla label dell’oggetto. Il testo inserito nel messaggio d’errore può essere proprio la

label dell’oggetto relativo all’errore verificatosi.

Le labels hanno un attributo for che deve essere lo stesso valore assegnato all’attributo id

dell’elemento di input, come nel seguente esempio :

<label for="txtCognome">Cognome</label> <input type="text" name="txtCognome" id="txtCognome">

Quando si usano i radio-buttons o i checkboxes l’attributo for della label deve essere settato

al valore dell’attributo name dell’elemento corrispondente in quanto gli elementi diversi si

riferiscono alla stessa label nei messaggi d’errore e, quindi, deve essere possibile connettere

alla stessa label tutti gli elementi, come nel seguente esempio :

<label for="chkLinguaggio">Linguaggi conosciuti</label> <label for="ling1">C++</label> <input type="checkbox" name="chkLinguaggio" id="ling1" value="1"/> <label for="ling2">HTML</label> <input type="checkbox" name="chkLinguaggio" id="ling2" value="2" />



Esempi di form Esempio 1


<html> <head> <title></title> </head> <body> <form>

<br>Esempio form con HTML <br><br>Cognome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Nome<br> <input type="text" size="30" maxlength="20" value=""> <br><br> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella">

</form> </body> </html>



Esempio 2

il codice corrispondente è (i radio button devono avere l’attributo name) :

<html> <head> <title></title> </head> <body> <form> <br>Esempio form con HTML <br><br>Cognome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Nome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Sesso : <br> <input type="radio" name="radSesso" value="uomo">uomo <input type="radio" name="radSesso" value="donna">donna <br><br> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella"> </form> </body> </html>



Esempio 3

Il codice corrispondente è :

<html> <head> <title></title> </head> <body> <form> <br>Esempio form con HTML <br><br>Cognome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Nome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Sport :<br> <input type="checkbox">Calcio <input type="checkbox">Pallavolo <input type="checkbox">Palestra <input type="checkbox">Pallacanestro <input type="checkbox">Altri <br><br> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella"> </form> </body> </html>



Esempio 4

<html> <head> <title></title> </head> <body> <form> <br>Esempio form con HTML <br><br>Cognome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Nome<br> <input type="text" size="30" maxlength="20" value=""> <br><br>Commenti :<br> <textarea cols="30" rows="8"></textarea> <br><br> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella"> </form> </body> </html>



Esempio 5

<html> <head> <title></title> </head> <body> <form> <br>Esempio form con HTML <br><br>Cognome e Nome<br> <input type="text" size="30" maxlength="30" value=""> <br><br>Titolo di studio :<br> <select> <option>Seleziona il titolo di studio</option> <option value="1">Licenza elementare</option> <option value="2">Licenza media</option> <option value="3">Diploma</option> <option value="4">Laurea</option> </select> <br><br><br><br><br><br> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella"> </form> </body> </html>



Esempio 6

Il codice corrispondente è :

<html> <head> <title></title> </head> <body> <form> <br>Esempio form con HTML <br><br>Username <input type="text" size="30" maxlength="20" value=""> <br><br>Password <input type=password size="30" maxlength="20" value=""> <br><br><br> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella"> </form> </body> </html>



Esempio di form completo

Il seguente codice per realizzare il form in figura utilizza due tabelle : la tabella esterna

serve per la cornice (in questo esempio rossa. Ovviamente si possono, per esempio utilizzando

i CSS, adottare altre soluzioni!) ed una tabella interna con 7 righe e 2 colonne in cui ogni cella

della tabella contiene un elemento del form.

La tabella interna è necessaria per creare l’allineamento dei vari elementi che

compongono il form.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>Inserimento dati personali</title> </head> <body> <form NAME="frmInserimento" ACTION="../index.htm" METHOD="POST">  <table bgcolor="cyan" align="center" width = "75%" border="3" bordercolor ="red" cellspacing="0" cellpadding="20"> <caption> <font face = "comic sans ms" color="darkblue" size="5"> <b>Inserimento dati personali</b></font> </caption> <tr> <td> <table align ="center" width = "100%" border="0" cellspacing="0" cellpadding="10"> <tr> <td> <label for="txtCognome">Cognome</label><br> <input type="text" name="txtCognome" id ="txtCognome" size="30" maxlength="20" value=""> </td> <td> <label for="txtNome">Nome</label><br> <input type="text" name="txtNome" id="txtNome" size="30" maxlength="20" value=""> </td> </tr>  <tr> <td> <label for="txtIndirizzo">Indirizzo</label><br> <input type="text" name="txtIndirizzo" id="txtIndirizzo" size="40" maxlength="30" value="Via"> </td> <td> <label for="txtComune">Comune</label><br> <input type="text" name="txtComune" id="txtComune" size=40 maxlength=30 value=""> </td> </tr>  <tr> <td> <label for="txtDatanascita">Data di Nascita</label><br> <input type="text" name=txtDatanascita id="txtDatanascita" size="15" maxlength="10" value=""> </td> <td> <label for="txtCodfiscale">Codice fiscale</label><br> <input type="text" name="txtCodfiscale" id="txtCodfiscale" size="30" maxlength="16" value =""> </td> </tr>

<tr>

<td> <label for="txtTelefono">Telefono</label><br> <input type="text" name="txtTelefono" id="txtTelefono" size="25" maxlength="15" value =""> </td> <td> <label for="txtEmail">EMail</label><br> <input type="text" name="txtEmail" id="txtEmail" size="30" maxlength="20" value =""> </td> </tr>  <tr> <td> <label for="selStudio">Titolo di studio</label><br> <select name="selStudio" id="selStudio"> <option>Seleziona il titolo di studio</option> <option value="1">Licenza elementare</option> <option value="2">Licenza media</option> <option value="3">Diploma</option> <option value="4">Laurea</option> </select> </td> <td> <label for="radSesso">Sesso</label><br> <input type="radio" name="radSesso" id="uomo" value="uomo"/> <label for="uomo">Uomo</label> &nbsp&nbsp&nbsp <input type="radio" name="radSesso" id="donna" value="donna"/> <label for="donna">Donna</label> </td> </tr>  <tr> <td> <label for="chkLingue">Lingue conosciute</label><br> <input type="checkbox" name="chkLingue" id="ing" value="ing" /> <label for="inglese">Inglese</label> <input type="checkbox" name="chkLingue" id="fra" value="fra" /> <label for="francese">Francese</label> <input type="checkbox" name="chkLingue" id="ted" value="ted" /> <label for="tedesco">Tedesco</label> <input type="checkbox" name="chkLingue" id="spa" value="spa" /> <label for="spagnolo">Spagnolo</label> </td> <td> <label for="fileFoto">Foto</label><br> <input type="file" name="fileFoto" id="filefoto"/> </td> </tr>  <tr> <td> <label for="txtaNote">Note</label><br> <textarea name="txtaNote" id="txtaNote" cols="50" rows="5"></textarea> </td> </tr>

</table> </td> </tr> </table>  <br><center> <input type="submit" name="cmdInvia" value="Invia"> <input type="reset" value="Cancella"> </center> </form> </body> </html>

HTML - francy59.altervista.orgfrancy59.altervista.org/pagine/html/HTML.pdf · Form • Elementi di...

Documents

Transcript of HTML - francy59.altervista.orgfrancy59.altervista.org/pagine/html/HTML.pdf · Form • Elementi di...