html creazione di moduli prof.ssa daniela decembrino
TRANSCRIPT
![Page 1: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/1.jpg)
HTML
Creazione di moduli
Prof.ssa Daniela Decembrino
![Page 2: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/2.jpg)
La pagina web
Una pagina web è un insieme di contenuti• testuali (parole), • grafici (disegni, immagini, foto) • multimediali (suoni, video)
visualizzati sullo schermo durante una connessione in rete (Internet, Intranet, Extranet) effettuata utilizzando un opportuno programma (browser) quale Internet Explorer, Mozzilla Fire Fox, Google Chrome.
![Page 3: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/3.jpg)
Gli aspetti di un pagina web
Una pagina web può essere:
• statica HTML
• dinamica HTML + script = DHTML
• interattiva DHTML + presenza umana da ambo i lati della comunicazione (ricevitore, trasmettitore): videoconferenza, chat.
![Page 4: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/4.jpg)
Il modulo web
Un modulo web è una pagina web contenente elementi che possano essere inviati dall’utente umano redattore (trasmettitore) all’utente umano destinatario (ricevitore) sia in modalità sincrona che in modalità asincrona. Esistono varie tipologie di moduli:
• modulo d’ordine ;• modulo di iscrizione;• sondaggio.
Un modulo web costituisce esempio di pagina web dinamica.
![Page 5: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/5.jpg)
L’interazione client/server
Modulo d’ordine
Internet Internet
Up Load
Down Load
![Page 6: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/6.jpg)
I linguaggi di rete
I linguaggi di rete si suddividono in due categorie:• Client side;• Server side.
Questi linguaggi permettono di programmare le pagine web rendendole dinamiche oppure interattive.Ricordiamo che l’HTML non è un linguaggio di programmazione!
![Page 7: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/7.jpg)
Gli script Client side
Gli script Client side sono codici eseguiti sulla macchina in cui risiede il browser. I più famosi e diffusi script Client side sono:• JavaScript, VBScript;• Applet Java.
I primi due sono embedded cioè interni: vengono inseriti all’interno dell’HTML della pagina web cui si riferiscono.L’ultimo è esterno cioè risiede in un file esterno che viene richiamato all’interno dell’HTML.
![Page 8: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/8.jpg)
Gli script Server side
Gli script Server side sono codici eseguiti sulla macchina in cui risiede il Server che deve elaborare i dati ricevuti dal Client.I più famosi e diffusi script Server side sono:• PHP (Personal Home Pages);• ASP (Active Server Pages).
Il primo è open source scaricabile liberamente dal sito www.php.net . Il secondo è proprietario. Entrambi questi script vengono inclusi nell’HTML.
![Page 9: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/9.jpg)
Le applicazioni CGI
Le applicazioni CGI (Common Gateway Interface) consentono di creare pagine web dinamiche sia lato Client che lato Server ricorrendo ai linguaggi di programmazione quali:• C;• Java.
![Page 10: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/10.jpg)
La creazione di un form
L’inserimento di un modulo all’interno di una pagina web avviene attraverso la creazione di un form accompagnato dai suoi attributi method e action. …
<FORM NAME=“nomeForm” METHOD=“metodo” ACTION=“destinazione”>Modulo da compilare e inviare.</FORM>…
![Page 11: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/11.jpg)
L’attributo method
L’attributo method specifica il metodo di invio dei dati dal client al server e può assumere tre parametri:•get invia i dati inseriti nel modulo rendendo visibile l’indirizzo di ricezione (poco sicuro!);•post invia i dati inseriti nel modulo rendendo invisibile l’indirizzo di destinazione (preferibile!);•enctype riguarda i MIME (Multipurpose Internet Mail Extension) .
![Page 12: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/12.jpg)
L’attributo action
L’attributo action specifica l’azione invocata in seguito alla pressione del bottone di invio (submit) che indica l’indirizzo del destinatario.
…<FORM><ACTION=“mailto:[email protected]”>Modulo da compilare e inviare.</FORM>…
![Page 13: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/13.jpg)
Gli elementi che compongono il form
Gli elementi che compongono un form sono quattro:•input consente l’immissione dei dati descritti mediante l’attributo type (pulsante, casella di testo, sceltamutipla);•textarea consente la creazione di una area di testo per contenere testi estesi; •select consente la creazione di menù;•fieldset consente di incorniciare più campi.
![Page 14: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/14.jpg)
L’elemento input e i parametri dell’attributo type L’elemento input è seguito dall’attributo type che può assumere i seguenti parametri:• text casella di testo su riga singola;• radio scelta esclusiva;• checkbox scelta multipla;• submit, image, reset pulsante di invio, pulsante di ripristino.
![Page 15: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/15.jpg)
L’elemento input e gli altri attributi che seguono typeL’elemento input deve essere seguito dall’attributo type e dagli altri attributi che sono:•name nome della variabile;•maxlength lunghezza del valore assunto dalla variabile;•size dimensione dello scrolling;•value contenuto della variabile ;•readonly eventuale sola lettura;•enabled eventuale disabilitazione.
![Page 16: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/16.jpg)
L’elemento input seguito dall’attributo type=“text”
…<FORM>…Cognome<INPUT TYPE=“text” NAME=“cognome” SIZE=“25” VALUE=“lunghezza massima consentita 25 caratteri”>…</FORM>…
![Page 17: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/17.jpg)
L’elemento input seguito dall’attributo type=“radio”
…<FORM>…0-9<INPUT TYPE=“radio” NAME=“scelta” VALUE=“0-9”><BR>10-19<INPUT TYPE=“radio” NAME=“scelta” VALUE=“10-19”>…</FORM>…
![Page 18: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/18.jpg)
L’elemento input seguito dall’attributo type=“checkbox”
…<FORM>…cinema<INPUT TYPE=“checkbox” NAME=“cinema” VALUE=“cinema”><BR>teatro<INPUT TYPE=“checkbox” NAME=“teatro” VALUE=“teatro”>…</FORM>…
![Page 19: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/19.jpg)
L’elemento input seguito dall’attributo type=“submit”
…<FORM>…<INPUT TYPE=“submit” VALUE=“Invio modulo”>…</FORM>…
![Page 20: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/20.jpg)
L’elemento input seguito dall’attributo type=“image”
Se l’elemento input viene seguito dall’attributo type impostato al parametro image seguito a sua volta dall’indicazione dell’URL specificato tramite il tag SRC allora il pulsante di invio dei dati contenuti nel modulo viene raffigurato con l’immagine specificata.
![Page 21: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/21.jpg)
L’attributo type=“image”
…<FORM>…<INPUT TYPE=“image” SRC=“immagine.gif”>…</FORM>…
![Page 22: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/22.jpg)
L’elemento input seguito dall’attributo type=“reset”
…<FORM>…<INPUT TYPE=“reset” VALUE=“Ripristino del modulo”>…</FORM>…
![Page 23: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/23.jpg)
L’elemento textarea e i parametri dei suoi attributi L’elemento textarea è seguito dai seguenti attributi:• name nome del testo;• rows numero di righe del testo;• cols numero di colonne del testo;• wrap possibilità di andare a capo (off / virtual)
![Page 24: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/24.jpg)
L’elemento textarea
…<FORM>…<TEXTAREA NAME=“testo” ROWS=“2” COLS=“22” WRAP=“off”>Il presente testo viene inserito continuativamente perché WRAP è OFF!…</FORM>…
![Page 25: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/25.jpg)
L’elemento select e i parametri dei suoi attributi L’elemento select è seguito dai seguenti attributi:• name nome dell’elenco;• multiple size opzione per indicare la scelta multipla.
L’elemento select prevede un tag di chiusura e uno di apertura al cui interno viene inscatolato un altro tag di chiusura e apertura che è option riscritto per ciascuna opzione di scelta possibile.
![Page 26: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/26.jpg)
L’elemento select
…<FORM>…<SELECT NAME=“elenco” MULTIPLE SIZE=“5” ><OPTION>Primo valore</OPTION><OPTION>Secondo valore</OPTION></SELECT>…</FORM>…
![Page 27: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/27.jpg)
L’elemento select seguito dal tag optgroup L’elemento select può anche essere seguito dal tag di sola apertura optgroup che consente di raggruppare le opzioni di scelta utilizzando il seguente attributo:• label nome del sotto elenco.
Il tag optgroup deve precedere ogni coppia di tag option previsti all’interno del tag di apertura e chiusura select.
![Page 28: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/28.jpg)
L’uso del tag optgroup all’interno dell’elemento select
…<FORM>…<SELECT NAME=“Elenco”><OPTGROUP LABEL=“Frutta”><OPTION>Pere</OPTION><OPTION>Mele</OPTION><OPTGROUP LABEL=“Verdura”><OPTION>Rape</OPTION><OPTION>Cicorie</OPTION></SELECT>…</FORM>…
![Page 29: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/29.jpg)
L’elemento fieldset
L’elemento fieldset svolge una funzione puramente esteticag consentendo di raggruppare più campi di uno stesso modulo incorniciandoli. Questo elemento è seguito dall’attributo di apertura e chiusura espresso mediante il seguente tag :• legend titolo aggiuntivo alla sezione di campi incorniciati.
Il tag legend consente di allineare (align) il titolo e di posizionarlo (top, center, bottom, left, right).
![Page 30: HTML Creazione di moduli Prof.ssa Daniela Decembrino](https://reader035.vdocuments.pub/reader035/viewer/2022070313/5542eb65497959361e8d0f12/html5/thumbnails/30.jpg)
Raggruppamento dei campi all’interno del modulo
…<FORM>…<FIELDSET><LEGEND ALIGN=“center”>Area riservata</LEGEND>…</FIELDSET>…<FIELDSET><LEGEND ALIGN=“center”>Ordine</LEGEND>…</FIELDSET>…</FORM>…