Gestire margini, padding e bordi by Corso Grafica e Web Design

Applicare lo stile: gestire margini, padding e bordi degli elementi

Introduzione In questa lezione prenderemo in considerazione dettagliatamente tutte le regole di stile CSS 2.0 attualmente utilizzate per gestire e applicare degli stili specifici ai contenitori (box), in cui sono generalmente collocati gli elementi di una struttura (X)HTML. Sfruttando la struttura di tali contenitori (il cosiddetto box-model) sarĂ infatti possibile applicare in maniera ragionata degli stili specifici per modificare i loro margini, padding e bordi.

Modello di formattazione secondo il box model Secondo questo specifico modello di formattazione ogni elemento indicato in un documento sorgente (X)HTML è racchiuso in un contenitore di forma rettangolare. Sono proprio questi contenitori che possono essere modificati attraverso l’utilizzo dei CSS, con specifiche proprietà e relativi valori. Per ogni “contenitore” è possibile controllare lo stile attraverso l’utilizzo di specifiche proprietà che andranno a intervenire sui seguenti parametri o parti del box-model:

✦Margini – Indicano lo spazio al di fuori dell’elemento contenitore e del bordo di questo, che separa un dato elemento dagli altri. ✦Bordi – Sono quelle linee opzionali che si trovano all’interno dei margini degli elementi, ma esternamente al loro padding. Pertanto tali linee racchiuderanno interamente l’elemento stesso e il suo padding. ✦Padding – Come visto nell’unità dedicata alle tabelle (X)HTML, il padding indica lo spazio tra un elemento e il suo bordo. ✦Limite interno – I limiti dell’elemento o dell’area di contenuto sono da considerare come i bordi interni dell’elemento contenitore. Appoggiandosi proprio a questo elemento è possibile impostare

proprietà di stile in relazione alla sua estensione (proprietà width e height) Nelle pagine (X)HTML tali limiti sono invisibili. ✦Limite esterno – Il bordo esterno dell’area di “margine” è rappresentato proprio dal limite massimo di un elemento contenitore. Tale limite indica l’area totale complessiva che un dato elemento andrà ad occupare nella pagina, nella sua visualizzazione finale. Questo limite pertanto include la larghezza dell’area di contenuto, le dimensioni del padding, dei bordi e delle eventuali immagini applicate all’elemento in questione. Anche in questo caso, nella visualizzazione finale della pagina, tale limite risulterà sempre invisibile.

✦Area elemento o di contenuto – Come fulcro dell’"elemento contenitore troviamo l’area di contenuto, contenente un dato elemento della struttura (X)HTML di base.

Rappresentazione grafica di un box model e delle parti su cui Ă¨ possibile intervenire utilizzando le regole di stile

Le proprietà relative ai margini, al padding e ai bordi e alle altre componenti del box-model possono essere applicate singolarmente oppure possono agire insieme per trasformare contemporaneamente, sotto più aspetti, la visualizzazione di un dato elemento. Modificare l’area di contenuto Per modificare l’area di contenuto occupata da un dato elemento, secondo lo schema presentato, è possibile utilizzare le proprietà width e height (i valori associabili a tali proprietà possono essere espressi in

em, pixel e valori di percentuale) per specificare proprio la larghezza e l’altezza del contenuto dell’area di un dato elemento (X)HTML. Le proprietà width e height possono essere utilizzate solo in associazione agli elementi di blocco livello e agli elementi in linea non testuali (come ad esempio gli elementi img). Pertanto non sarà possibile specificare la larghezza e l’altezza dell’area occupata da un elemento <em>. I parametri di larghezza e altezza di un elemento di blocco livello vengono calcolati in automatico dal browser in uso. Pertanto un elemento, senza specificare altrimenti con apposite regole di stile, sarà ampio quanto la finestra del browser o quanto l’elemento che lo

contiene e sarĂ sviluppato in altezza quanto basta per adattarsi al contenuto. Sintassi base delle proprietĂ di stile height e width selettore1 {width: 200px; height: 100px;} selettore2{width: 200px; height: 400px;} Struttura esempio <html> <head><title>proprietĂ di stile width e height</title> <style type="text/css"> body {background-color: #FF7F50; } p:first-line { color: red; } p, h3, em, h4 {width: 50%; height: 20%; text-align: center; color: #00008B; }

p.autore {font: bold black; } </style> </head> <body> <h3>Esempio di utilizzo delle proprietà di stile <b>width</b> e <b>height</b></h3> <h4>Il più bello dei mari</h4> <p> Il più bello dei mari è quello che non navigammo<br/> Il più bello dei nostri figli non è ancora cresciuto<br/> I più belli dei nostri giorni non li abbiamo ancora vissuti<br/> E quello che vorrei dirti di più bello non te l'ho ancora detto<br/> <em>

Nazim Hikmet</em> </p> </body> </html> Output

Definire i margini degli elementi L’utilizzo degli stili per modificare la visualizzazione dei margini degli elementi è fondamentale per stabilire con precisione la distanza esatta che dovrà intercorrere tra i molteplici elementi presenti in un documento (X)HTML. Infatti è possibile utilizzare le proprietà relative ai margini proprio per modificare lo spazio intorno a un determinato elemento.

Attraverso gli stili sarà possibile aumentare o diminuire a seconda delle esigenze tale distanza, intervenendo con valori diversi applicabili alle proprietà relative ai margini. Le seguenti proprietà servono a modificare l’aspetto dei margini di un elemento singolarmente: 

margin-top – Agisce sul margine superiore di un elemento



margin-bottom - Agisce sul margine inferiore di un elemento



margin-right - Agisce sul margine destro di un elemento



margin-left - Agisce sul margine sinistro di un elemento

Le proprietà elencate presentano il seguente formato di utilizzo base: selettore {proprietà_margine: valore;} Esistono ovviamente proprietà singole specifiche così come un’unica proprietà abbreviata margin. Attraverso l’utilizzo della proprietà abbreviata “margin” sarà possibile specificare più parametri contemporaneamente in relazione a uno oppure a tutti e quattro i bordi, come nella seguente regola di stile:

selettore {margin: 2px 4px 10px 4px; } Utilizzando la proprietà abbreviata margin non è necessario specificare lo spessore di tutti e 4 i margini. Specificando un singolo valore (per un singolo margine), questo verrà applicato automaticamente a tutti gli altri margini. Tuttavia, specificando invece una coppia di valori diversi, il primo valore sarà applicato per il margine superiore e quello inferiore, mentre il secondo valore inserito verrà associato ai margini destro e sinistro.

Infine, qualora vengano indicati 3 valori: il primo sarà associato al margine superiore, il secondo ai margini destro e sinistro e l’ultimo valore al margine inferiore. Per modificare la distanza tra gli elementi è possibile utilizzare anche la proprietà float. Con questa specifica proprietà è possibile specificare la posizione di un dato elemento all’interno del suo contenitore . Il contenuto che circonda l'elemento scorrerà intorno ad esso sul lato opposto rispetto a quello indicato come valore di float.

Sintassi

selettore {float: valore;}

I valori di utilizzo per questa particolare proprietà sono:  left. l'elemento indicato è posto sul lato sinistro del box contenitore, mentre il contenuto scorre a destra.  right. L'elemento indicato è posto sul lato destro del box contenitore, mentre il contenuto scorre a sinistra.

Il valore di default, senza che la proprietà float venga specificata, implica un posizionamento normale dell’elemento indicato. La seguente struttura parziale ad esempio può essere utilizzata per posizionare secondo un valore preciso due elementi: l’immagine inserita che sarà posizionata a sinistra dell’elemento contenitore, mentre il contenuto presente accanto ad essa scorrerà sul lato destro. <html> <head><title>proprietà float</title> <style type="text/css"> p { font: italic bold 20px "Times New Roman", serif;} h2 {text-decoration: underline; } img {float: left; } </style>

</head> <body> <h2><em>Dedicata agli amici a quattro zampe</em></h2> <p> <img src="cuccioli.jpg"/> Ficcando il naso nero nel vetro, il cane aspetta, aspetta sempre qualcuno</p> <p> Infilo la mano nel suo pelo, io pure aspetto qualcuno. </p> <p>Ricordi, cane, c'Ă¨ stato un tempo quando una donna abitava qui. </p> <p>E chi era essa per me? Forse una sorella, una moglie forse, </p> <p>e forse, talvolta, sembrava una figlia a cui dovevo il mio aiuto. </p> <p>Essa Ă¨ lontana... Ti sei fatto zitto. PiĂš non ci saranno altre donne qui. </p> <p>Mio bravo cane, sei bravo in tutto, ma che peccato che tu non possa bere!</p>

</body> </html>

Output

Modificare lo stile del padding Coma abbiamo visto il padding è quello spazio compreso tra un elemento e il suo bordo. La configurazione del padding è simile a quella relativa ai margini. Infatti esistono proprietà per specificare lo stile del padding su ogni lato di un elemento così come è previsto l’utilizzo di una proprietà abbreviate per configurare contemporaneamente padding diversi.

Le proprietĂ di stile singole utilizzabili per la configurazione del padding sono: padding-top, padding-right, padding-left e paddingbottom. Eâ&#x20AC;&#x2122; possibile utilizzare i padding come se fossero margini. Incrementare il padding implica anche un incremento dello spazio tra gli elementi. Tuttavia i margini dovrebbero essere utilizzati per aumentare lo spazio tra gli elementi, mentre il padding dovrebbe essere specificato e aumentato per migliorare la leggibilitĂ di un documento, separando un dato elemento dai suoi bordi.

Ad esempio, il colore di sfondo di un elemento di estende automaticamente fino al limite del padding dell’elemento stesso. Pertanto incrementare il padding di un elemento può estendere lo sfondo oltre all’elemento stesso. Vediamo in che modo utilizzare le proprietà di stile specifiche per modificare il padding degli elementi. Con le proprietà padding-top, padding-right, padding-bottom e padding-left, possiamo specificare un diverso valore di padding per ogni lato di un elemento, come indicato dalla struttura seguente e nel relativo output.

<html> <head><title>padding</title> <style type="text/css"> h2 {text-align: center; } p { font: italic bold 20px "Times New Roman", serif;} blockquote { padding-top: 1em; padding-right: 3em; padding-bottom: 1em; padding-left: 3em; background-color: #D098D4; width: 60%; text-align: center;} // L’area del padding è stata evidenziata in viola. Valori maggiori di padding sono impostati per i lati sinistro e destro dell’elemento blockquote // img {float: right; } </style> </head> <body> <h2><em>Dedicata agli amici a quattro zampe</em><img src="cuccioli.jpg"/></h2> <blockquote> <p> Ficcando il naso nero nel vetro, il cane aspetta, aspetta sempre qualcuno.

</p> <p> Infilo la mano nel suo pelo, io pure aspetto qualcuno. </p> <p> Ricordi, cane, c'Ă¨ stato un tempo quando una donna abitava qui. </p> <p> E chi era essa per me? Forse una sorella, una moglie forse, </p> <p> e forse, talvolta, sembrava una figlia a cui dovevo il mio aiuto. </p>

<p> Essa Ă¨ lontana... Ti sei fatto zitto. PiĂš non ci saranno altre donne qui. </p> <p> Mio bravo cane, sei bravo in tutto, ma che peccato che tu non possa bere! </p> </blockquote> </body> </html>

Output

Ovviamente è possibile impostare valori di padding diversi in un’unica regola di stile, attraverso l’utilizzo della proprietà abbreviata padding. Con questa proprietà è possibile specificare da 1 fino a 4 valori, rispettando la seguente sequenza di valori:. Es. selettore { padding: top right bottom left; } blockquote { padding: 1em 3em 1em 3em; background-color: #D098D4;} Qualora si desideri impostare un padding destro e sinistro di uguale ampiezza è possibile fornire anche 3 soli valori, tenendo conto del

fatto che: il valore di padding per il lato destro (il secondo della sequenza) verrĂ applicato automaticamente anche per il lato sinistro, cosĂŹ come abbiamo visto in relazione alla proprietĂ margin. selettore { padding: top right/left bottom; } Allo stesso modo, fornendo due soli valori di padding, il primo valore verrĂ applicato ai lati superiore e inferiore, mentre il secondo ai lati sinistro e destro. selettore { padding: top/bottom right/left; }

Aggiungere e modificare i bordi Al contrario dei margini e del padding, i bordi hanno molte piĂš caratteristiche che possono essere configurate attraverso lâ&#x20AC;&#x2122;utilizzo dei CSS. Infatti per ogni singolo bordo Ă¨ possibile applicare uno stile relativo al colore, alla tipologia e allo spessore. Tutte le proprietĂ di stile per modificare la visualizzazione dei bordi degli elementi sono indicate nella tabella seguente.

ProprietĂ bordi Nome proprietĂ border border-collapse

Funzione ProprietĂ abbreviata Viene usata per unire in un unico bordo, i bordi di due elementi adiacenti. Valori: collapse e separate (default)

border-spacing

Viene usata per indicare la spaziatura presente tra i bordi delle celle adiacenti di una tabella.

border-top

border-right

Imposta un bordo superiore per un dato elemento Imposta un bordo destro per un dato elemento

border-bottom

Imposta un bordo inferiore per un dato elemento

border-left

Imposta un bordo sinistro per un dato elemento

border-color

Imposta un colore specifico per i bordi di un dato elemento

border-top-color

Imposta un colore specifico per il bordo superiore di un dato elemento

border-right-color

Imposta un colore specifico per il bordo destro di un dato elemento

border-bottom-color

Imposta un colore specifico per il bordo inferiore di un dato elemento

border-left-color

Imposta un colore specifico per il bordo sinistro di un dato elemento

border-style

Imposta uno stile specifico per tutti i bordi di un dato elemento. Valori: none, hidden, dotted, dashed, solid,

double, groove, ridger, inset e outset. border-top-style

Imposta uno stile specifico per il bordo superiore di un dato elemento.

border-right-style

Imposta uno stile specifico per il bordo destro di un dato elemento.

border-bottom-style

Imposta uno stile specifico per il bordo inferiore di un dato elemento.

border-left-style

Imposta uno stile specifico per il bordo sinistro di un dato elemento.

border-width

Imposta uno spessore specifico per i bordi

di un dato elemento. border-top-width

Imposta uno spessore specifico per il bordo superiore di un dato elemento.

border-right-width

Imposta uno spessore specifico per il bordo destro di un dato elemento.

border-bottom-width

Imposta uno spessore specifico per il bordo inferiore di un dato elemento.

border-left-width

Imposta uno spessore specifico per il bordo sinistro di un dato elemento.

Formattare i bordi creati Ora che abbiamo visto tutte le proprietĂ di stile associate ai bordi, vediamone alcune in dettaglio. Utilizzando la proprietĂ border-style sarĂ possibile applicare 10 diverse tipologie di stili predefiniti relativi a tutti i bordi di un dato elemento. Vediamo ad esempio la seguente struttura e il suo output relativo proprio allo stile dei bordi. <html> <head><title>Stili bordi</title>

<p class="bordo7"> inset </p> <p class="bordo8"> outset </p> </div> </body> </html> File .css collegato .bordo1 {border-style: dotted; } .bordo2 {border-style: dashed; } .bordo3 {border-style: solid; } .bordo4 {border-style: double; } .bordo5 {border-style: groove; } .bordo6 {border-style: ridge; } .bordo7 {border-style: inset; } .bordo8 {border-style: outset; } #sinistra { float: left; } #destra {float: right; }

Output

Esistono altri due valori relativi alla tipologia dei bordi: none e hidden. Entrambi i valori restituiscono una visualizzazione identica, dove nessun bordo compare. L’unica differenza fra questi due valori è che un bordo nascosto viene sempre considerato come un bordo vero e proprio, fatto da considerare nel caso si verifichino conflitti di visualizzazione. Tali conflitti avvengono quando elementi adiacenti condividono uno stesso bordo. In questo caso prevarrà per entrambi il valore di bordo “non hidden”. Nel caso in cui entrambi gli elementi abbiano un bordo impostato come “hidden”, il bordo in comune verrà pertanto automaticamente “nascosto”.

Gli stili per i bordi includono proprietà specifiche per ogni lato: border-top-style, border-right-style, border-bottom-style, border-leftstyle e ovviamente una proprietà unica, utilizzata già nell’esempio precedente, per impostare contemporaneamente stili diversi ai vari lati (border-style). Le proprietà individuali accettano un solo valore di stile per bordo e impostano il bordo su un lato dell’elemento, secondo il valore specificato. L’esempio seguente imposta tutti i bordi di un elemento come “puntinati” (dotted)

h2 {border-style: dotted;} Come ogni proprietà di stile abbreviata, i valori di border-style seguono le seguenti regole: ✦Specificando un solo automaticamente a tutti i lati.

valore

questo

verrà

applicato

✦Specificando due valori, il primo valore verrà usato per il bordo superiore e quello inferiore, mentre il secondo valore sarà utilizzato per il lato destro e sinistro.

✦Specificando 3 valori, il bordo superiore seguirà il primo valore, i lati destro e sinistro il secondo mentre il lato inferiore seguirà il terzo valore. Cambiare i colori di un bordo CSS E’ possibile applicare il colore dei bordi singolarmente, per ogni lato dell’elemento, attraverso le singole proprietà viste in tabella. Tuttavia anche in questo caso per velocizzare l’operazione di applicazione di stili è possibile utilizzare la proprietà unica border-color.

Tale proprietà permette di impostare insieme 4 possibili valori diversi per ogni lato. Anche per questa proprietà, la quantità di valori inseriti determina quali lati saranno coinvolti e da quali valori. La proprietà relativa ai colori dei bordi accetta valori in tre formati diversi: ✦Parole chiave - black, white, green, ecc. ✦Valori esadecimali - Questi valori sono specificati, come abbiamo già visto nella forma #rrggbb.

â&#x153;ŚValori di colori decimali o in percentuale - Questo valore viene specificato usando la proprietĂ rgb( ). Questa proprietĂ specifica prende tre valori, ciascuno per il rosso, il verde e il blu (rgb). Ogni singolo valore puĂ˛ essere qualsiasi numero intero compreso tra 0 e 255, oppure un valore percentuale. Ad esempio, il seguente codice specifica un colore viola (solo valori di rosso e blu, senza valori di verde) in forma di numero intero selettore {border-color: rgb(255, 0, 255); } Il seguente codice specifica invece lo stesso colore viola in valori di percentuale. selettore {border-color: rgb(100%, 0, 100%); }

Spessore dei bordi Lo spessore dei bordi di un elemento può essere specificato attraverso la proprietà unica border-width, oppure attraverso le proprietà singole, relative ai diversi lati di un elemento. La proprietà unica border-width accetta da 1 a 4 valori. Anche in questo caso il modo con cui i valori vengono associati ai singoli lati dipende dal numero dei valori indicati. Le regole da seguire per la specificazione dei valori sono le stesse viste in relazione alla proprietà border-style.

Come valori specifici per questa proprietà è possibile utilizzare le parole chiave: thin, medium e thick. Inoltre è possibile specificare lo spessore di un bordo utilizzando le unità di misura em e px. Ad esempio, per impostare tutti i bordi di un elemento con uno spessore di 2px è possibile utilizzare la seguente regola di stile: selettore { border-width: 2px; }

La proprietà abbreviata border Anche per quanto riguarda i bordi, la specifica proprietà border, indicata al primo posto nella tabella relativa alle proprietà di stile dei bordi, può essere utilizzata come proprietà abbreviata, determinando insieme in un’unica regola: lo stile, lo spessore e il colore di tutti i bordi di un elemento. Tale proprietà abbreviata presenta la seguente sintassi: selettore {border: border-width border-style border-color; } Pertanto, secondo tale sintassi della proprietà abbreviata border, i valori delle singole proprietà (border-style, border-color e border-

width) dovrebbero rispettare lâ&#x20AC;&#x2122;ordine indicato, impostando in primo luogo i valori relativi allo spessore e in ultima posizione quelli relativi al colore. Ad esempio per impostare un bordo come spesso (thick), doppio (double) e in rosso (red) bisognerĂ applicare la seguente regola di stile. selettore {border: thick double red;}

Altre proprietĂ in relazione ai bordi Due altre proprietĂ di stile specifiche per i bordi di un elemento vengano utilizzate in relazione alle tabelle. La proprietĂ borderspacing controlla la resa finale dello spazio presente tra i bordi delle celle di una tabella (X)HTML. La proprietĂ border-collapse invece serve ad indicare quando i bordi delle celle adiacenti dovranno essere considerati come un unico bordo.

Outline dinamici I cosiddetti outline forniscono un’ulteriore ed eventuale definizione di stile che permette al browser di evidenziare alcuni elementi al momento della loro visualizzazione da parte dell’utente. Tuttavia, un’outline di base, senza stili aggiuntivi, non è altro che una linea che serve a mettere in risalto un determinato elemento. L’applicazione di un’outline di base può ad esempio essere rappresentata dalla seguente definizione di stile: p {outline: #9932CC dashed medium; }

Struttura esempio <html> <head><title>esempio base outline</title> <style type="text/css"> h3 {color: red; text-align: center;} p {outline: #9932CC double medium; margin: auto; // margine automatico, pertanto lâ&#x20AC;&#x2122;elemento p apparirĂ in automatico come centrato, cioĂ¨ con una stessa distanza dai limiti esterni, secondo il box model // width: 200px; // larghezza dell'elemento / padding: 50px; align: center;} @font-face { font-family: Chiller; src: local("chiller.ttf"), url("chiller.ttf") format('truetype')} body {font-family: Chiller; font-size: 24px ; background-color: #FFE4E1;} </style> </head>

<body> <h3>Questo Ă¨ un esempio di utilizzo di uno stile relativo all'outline</h3> <p>Il testo di questo elemento paragrafo Ă¨ racchiuso da un "outline" di colore viola, double, medium e non semplicemente da un bordo! </p> </body> </html>

Output

I cosiddetti outline che non occupano uno spazio specifico nella pagina, vengono posizionati fuori dal bordo degli elementi. La posizione dell’outline non può essere spostata direttamente, ma può venire influenzata dalla posizione del bordo di un elemento. Attraverso i CSS è possibile modificare ulteriormente visualizzazione finale di queste linee particolari (outline).

Al contrario delle altre proprietà trattate in questa lezione, tutti gli outline di un elemento devono essere gli stessi e non possono essere controllati individualmente.

Le proprietà di outline sono le seguenti: outline-color, outline-style, outline-width e la proprietà abbreviata outline, usata nell’esempio precedente. La proprietà rapida outline può essere utilizzata con la seguente sintassi di base, evidenziata anche dall’ultima struttura esempio riportata. selettore {outline: outline-color outline-style outline-width; }

Per utilizzare gli outline in maniera dinamica è possibile associarli agli pseudo-selettori :active e :focus all’interno di un form (X)HTML. Questi due pseudo-elementi permettono di specificare che l’eventuale outline di un dato elemento dovrà essere visibile solamente quando l’elemento stesso verrà “focalizzato” dall’utente. Ad esempio la seguente definizione di stile specifica un’outline rossa sottile solo quanto gli elementi del form hanno un “focus” e un’outline verde sottile quando invece sono “attivi”

<html> <head> <title>esempio outline</title> <style type="text/css"> textarea:focus {outline: 2px solid blue;} textarea:active {outline: 2px solid red;} </style> </head> <body> <h4>Com'Ă¨ venuto a conoscenza della promozione?</h4> <hr/> <form action="handler.php" method="post"> <p class="primo campo"> <label for="nome">Nome: </label><br/> <input type="text" name="nome" id="nome" size="20"><br/>

<label for="cognome">Cognome: </label><br/> <input type="text" name="cognome" id="cognome" size="20"> </p> <p> <input type="checkbox" name="conoscenza" value="passaparola" id="passaparola"> <label for="passaparola">Passaparola</label><br/> <input type="checkbox" name="conoscenza" value="internet" id="internet"> <label for="internet">Internet</label><br/> <input type="checkbox" name="conoscenza" value="giornali" id="giornali"> <label for="giornali">Giornali</label><br/> <input type="checkbox" name="conoscenza" value="televisione" id="televisione"> <label for="televisione">Televisione</label><br/> <input type="checkbox" name="conoscenza" value="altro" id="altro">

<label for="altro">Altro</label><br/> </p> <p> Specificare da quale fonte<br/> <textarea> </textarea> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>

Output

Tuttavia non tutti i browser supportano correttamente degli stili specifici attraverso l’utilizzo congiunto della proprietà outline con gli pseudo-selettori :active e :focus. Un effetto simile si può tuttavia ottenere utilizzando al posto della proprietà outline, la proprietà border. Vediamo nuovamente la opportunamente modificata.

struttura

esempio

precedente,

<html> <head> <title>border al posto di outline</title> <style type="text/css"> body {background-color: #FFDEAD; } form {margin: 50px 200px 200px 550px; } input:focus { border: 2px solid green;} textarea:active { border: 2px solid red;} hr {width: 50%; } h4 {text-align: center; } </style> </head> <body> <h4>Com'Ă¨ venuto a conoscenza della promozione?</h4> <hr/> <form action="handler.php" method="post">

<p> <label for="nome">Nome: </label><br/> <input type="text" name="nome" id="nome" size="20"><br/> <label for="cognome">Cognome: </label><br/> <input type="text" name="cognome" id="cognome" size="20"> </p> <p> <input type="checkbox" name="conoscenza" value="passaparola" id="passaparola"> <label for="passaparola">Passaparola</label><br/> <input type="checkbox" name="conoscenza" value="internet" id="internet"> <label for="internet">Internet</label><br/> <input type="checkbox" name="conoscenza" value="giornali" id="giornali"> <label for="giornali">Giornali</label><br/> <input type="checkbox" name="conoscenza" value="televisione" id="televisione"> <label for="televisione">Televisione</label><br/> <input type="checkbox" name="conoscenza" value="altro" id="altro"> <label for="altro">Altro</label><br/>

</p> <p> Specificare da quale fonte<br/> <textarea> </textarea> </p> <p> <input type="submit"> <input type="reset"> </p> </form> </body> </html>

Output

FINE LEZIONE