I Tag dell html. Parte quarta

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "I Tag dell html. Parte quarta"

Virgilio Manfredi
8 anni fa
Visualizzazioni

1 I Tag dell html Parte quarta

2 Le Form I moduli, o form, rendono interattive le pagine Web. Per creare un elemento modulo si usa il tag: <form action="uri" method="post >...</form> L'attributo ACTION specifica l'uri della risorsa a cui il browser invierà i dati.

3 Tag <input> Un modulo può contenere più elementi INPUT, aventi diverse funzioni, definiti nel modo seguente: <input type="text" "password" "radio" "checkbox" "submit" "reset" "button" "image name="string" [value="string"] [checked] [size="n"] [maxlength="n"] >

"password" "radio" "checkbox" "submit" "reset" "button" "image

4 Type TEXT Crea un campo per l'immissione di una stringa. L'attributo SIZE definisce la dimensione del campo, ma resta comunque possibile inserire stringe di dimensione maggiore fino al valore definito da MAXLENGTH(in tal caso il testo scorrerà). L'attributo VALUE permette di inizializzare il campo.

possibile inserire stringe di dimensione maggiore fino al valore definito

5 Type PASSWORD Funziona come TEXT, con la differenza che il testo è offuscato da asterischi. L'invio dei dati avviene però in chiaro, dunque non è assicurata la confidenzialità.

6 Type RADIO Crea un gruppo di voci di selezione mutuamente esclusive. Il gruppo è definito dall'attributo NAME, che deve avere lo stesso valore per ogni voce appartenente al gruppo, mentre VALUE è diverso per ogni voce. Il dato inviato è costituito dalla coppia NAME+VALUE.

valore per ogni voce appartenente al gruppo, mentre VALUE è diverso

7 Type CHECKBOX Crea una singola voce di selezione; se selezionata, ritorna NAME=on.

8 Type SUBMIT Crea un pulsante che mostra il testo definito dall'attributo VALUE. Quando premuto, il browser invia i dati secondo il metodo specificato le form.

9 Type RESET Crea un pulsante che mostra il testo definito dall'attributo VALUE. Quando premuto, il browser ripristina i valori di default in tutti gli elementi del modulo.

10 Tag <select> Il tag <select> crea un menu di voci opzionali. <select name="string" >...</select> Le singole voci sono definite dall'elemento <option>: <option value="string" [selected] >... </option> Se una voce è SELECTED, sarà quella selezionata per default.

11 Esempio form <form method="post ENCTYPE="text/plain"> <p align="left">text:</p> <input type="text" value="testo di default" size="20"> <p align="left">radio:</p> <input type="radio" name="uno" value="uno1" checked="checked">prima opzione<br /> <input type="radio" name="uno" value="uno2">seconda opzione<br /> <input type="radio" name="uno" value="uno3">terza opzione<br /> <p align="left">checkbox:</p> <input type="checkbox" name="uno">prima opzione<br /> <input type="checkbox" name="due">seconda opzione<br /> <input type="checkbox" name="tre">terza opzione<br /> <p align="left">select:</p> <select name="uno"> <option value="uno" selected>uno</option> <option value="due">due</option> <option value="tre">tre</option> </select> <p align="left">reset:</p> <input type="reset" value="cancella tutto"> <p align="left">submit:</p> <input type="submit" value="spedisci i dati"> </form>

checked="checked">prima opzione<br /> <input type="radio" name="uno" value="uno2">seconda opzione<br /> <input type="radio" name="uno" value="uno3">terza opzione<br /> <p align="left">checkbox:</p>

12 Invio tramite posta <html> <head> <script> // Soggetto della mail subject = "Dati dal sito"; // Indirizzo per il ritorno dei dati = "info@tarabaralla.info"; function sendform() { var data = ""; for (j = 0; j < document.forms[0].length - 1; ++j) { data += document.forms[0].elements[j].name + ": " + document.forms[0].elements[j].value + " "; } window.open("mailto:" + + "?subject=" + subject + "&body=" + data,"_self"); } </script> </head> <body>

forms[0].length - 1; ++j) { data += document.forms[0].elements[j].name + ": " + document.forms[0].elements[j].value + " "; } window.

13 Invio tramite posta 2 <form name="iscrizione"> Nome:<input type="text" name="nome" value="carlo"><br><br> Indirizzo:<input type="text" name="indirizzo" value="via del pozzetto"><br><br> Telefono:<input type="text" name="telefono" value=" "><br><br> <input type="button" value="send" onclick="sendform()"> </form></body></html>

pozzetto"><br><br> Telefono:<input type="text" name="telefono"

14 Tag <object> Consentono di inserire oggetti multimediali come video: <object data= video.mpeg type= application/ mpeg > Alternativa al video </object>

15 Tag <object> (video youtube) <object width="425" height="344"><param name="movie" value=" v/hkob0mhvbvm&hl=it&fs=1"></ param><param name="allowfullscreen" value="true"></param><param name="allowscriptaccess" value="always"></ param><embed src=" v/hkob0mhvbvm&hl=it&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

com/ v/hkob0mhvbvm&hl=it&fs=1"></ param><param name="allowfullscreen" value="true"></param><param

16 Tag <div> E usato per raggruppare logicamente gli elementi dell html. Non ha nessun effetto diretto visibile sulla visualizzazione degli elementi in esso contenuti. Verrà usato per la definizione degli stili con il css.

17 Introduzione ai CSS Introduzione

18 Cosa è il CSS I fogli di stile a cascata (CSS) costituiscono uno strumento potente e flessibile per controllare la presentazione dei documenti. I CSS semplificano notevolmente il lavoro di editing ed eliminano la ripetizione dei comandi. E' infatti possibile definire il layout delle pagine e l'aspetto di elementi ricorrenti all'interno del documento (ad esempio, dimensione, font e colori di testo e titoli). L'introduzione dei CSS ha reso obsoleti molti attributi degli elementi HTML.

E' infatti possibile definire il layout delle pagine e l'aspetto di elementi ricorrenti all'interno del documento (ad

19 Cosa è il CSS (2) Tramite il linguaggio CSS si può definire lo stile (colore, sfondo, grandezza, bordo, allineamento ) di uno o più gruppi (tag) di una pagina (o più) html.

20 Struttura del CSS Come gli attributi dell html, ogni caratteristica dello stile di un elemento html o di un gruppo di elementi deve essere definita tramite la seguente sintassi: attributo1: valore; attributo2: valore In html era: attributo1= valore attributo2= valore Nota che in CSS gli attributi sono separati da ; in html dagli spazi.

sintassi: attributo1: valore; attributo2: valore In html era: attributo1= valore

21 Come si specificano i CSS Gli attributi CSS associati a ciascun tag html si possono specificare in due modi: Tramite l attributo style dell html : <p style= background: yellow; color: red > In questo modo però si perdono i vantaggi del CSS dato che lo stile potrebbe essere specificato tramite gli attributi classici dell html Tramite I fogli di stile.

22 I fogli di stile I fogli di stile sono dei file esterni o delle sezioni della pagina html in cui si specifica lo stile di ciascun tag della pagina tramite il CSS. Il foglio di stile può essere integrato nella pagina html specificando il css nell header all interno del tag <style type= text/css > o in un file esterno.

23 Fogli di stile Che sia racchiuso in un tag o in un file esterno I fogli di stile hanno questa struttura: P { color: red } Con tale stile tutti gli elementi racchiusi dentro I tag <p> avranno il testo di color rosso

24 Fogli di stile esterni Se si definisce lo stile in un foglio esterno tutte le pagine che dovranno seguire quello stile dovranno contenere dentro head: <link rel="stylesheet" href= style.css" type="text/ css" media="screen">

25 Stile interno Se invece si vuole definire lo stile all interno di una pagina html si deve aggiungere una sezione style dentro head (comunque sconsigliato perchè va ripetuto in ogli pagina con lo stesso stile): <style>  </style>

Documenti analoghi

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>...

HTML HTML. HyperText Markup Language. Struttura di un documento. Gli elementi essenziali di un documento HTML sono i seguenti TAG: <HTML>... HTML HyperText Markup Language Struttura di un documento HTML Gli elementi essenziali di un documento HTML sono i seguenti TAG: ... ... ... Struttura di un documento