HTML 4.01 Settima lezione 7 Aprile 2004 di Ivano Stranieri.

Slides:



Advertisements
Presentazioni simili
UNO STRUMENTO PER INTERAGIRE CON GLI UTENTI DELLE PAGINE WEB
Advertisements

A. Ferrari Alberto Ferrari. Un form html è una sezione di documento che contiene Testo normale e markup Elementi speciali chiamati controlli (checkbox,
Modulo o Form in Html.
Laboratorio di Applicazioni Informatiche II mod. A
Il linguaggio ASP Lezione 4 Manipolare i database con ASP Lutilizzo dei FORM per laggiunta dei dati.
Tag Sintassi Testo, tag di formattazione, Nota: - tag di chiusura - attributi.
Moduli o Form I Moduli permettono all'utente di immettere informazioni...
COMUNICAZIONE ONLINE, RETI E VIRTUALITA’
HTML Creazione di moduli Prof.ssa Daniela Decembrino.
BIOINFO3 - Lezione 111 CGI-BIN CGI-BIN sono chiamati i programmi la cui esecuzione può essere richiesta attraverso il WEB. Il server web (httpd) della.
HTML I Form in HTML5.
Web Form Presentazione 2.2 Comunicazione integrata in rete| Prof. Luca A. Ludovico.
Premessa Con i FORMS (moduli) l'utente può interagire con il sito spedendo un proprio commento, avanzando richieste senza necessità di scrivere via ,
Form o moduli HTML Esistono degli oggetti standard che permettono una certa interattività con l'utente. Un utilizzo completo e significativo di tali elementi.
1 Liste e Combo Liste e combo (lista chiusa) hanno una struttura simile: utilizzano gli stessi due tag: e Il primo tag contiene il secondo. deve essere.
HTML 4.01 Apogeo. I tag di base Capitolo 1 I tag SintassiEsempi:
Lezione 6: Form.  In alcuni documenti HTML può essere utile creare dei moduli (form) che possono essere riempiti da chi consulta le pagine stesse (es.
Table View. Problemi ricorrenti Una situazione ricorrente è quella in cui il controller potrebbe avere un’altezza superiore a quella dello schermo. In.
Presentazione web domanda di accreditamento Programmazione
CORSO elementare su DATABASE Applicativo utilizzato OpenOffice 3.0.
Disegni di Ricerca e Analisi dei Dati in Psicologia.
CSS ( Cascading Style Sheets) Fogli di Stile Linguaggi di formattazione stilistica e strutturale di un documento HTML o di una serie di documenti in cascata.
Programmare “per gioco” SCRATCH Lo programmerò. Programmerò solo per lei.
Utilizzare il browser Firefox, altrimenti le mappe immagini non funzionano.
Dati in rete Appunti.
Introduzione al backend di Sharepoint_P3
HTML5 Tools Pearson
“Vivere insieme” – Lezione6
Introduzione al linguaggio HTML L’HTML (Hyper Text Markup Language)
“Vivere insieme” – Lezione6
Per informazioni: I PORTALI ELLY: INTRODUZIONE Per informazioni:
Esportare le proprie mappe da QGis
Sss Tutorial Reader 2D Tutorial.
Hyper Text Markup Language
EasyGraph Dynamic web-based dashboard
Dati in rete Appunti.
Il Binding Nicolò Sordoni.
Excel 1 - Introduzione.
Nuovo Portale Antidoti
IUManji Progetto di Interazione Uomo Macchina.
FORMULE E FUNZIONI SU EXCEL
I tag essenziali.
Creazione di pagine per Internet
HTML 4.01 Terza lezione Bruno Di Caprio.
1.
istalliamo l’ambiente di sviluppo - ide
HTML 4.01 Quinta lezione 22 Marzo 2004 di Ivano Stranieri.
HTML 4.01 Ottava lezione 14 Aprile 2004 di Ivano Stranieri.
Italsoft srl Guida allo Sportello Italsoft srl
Predisposizione e presentazione della domanda di nullaosta
Access.
INTRODUZIONE A EXCEL Il foglio elettronico o foglio di calcolo è una tabella che contiene parole e numeri che possono essere elaborati applicando formule.
Io bloggo, e tu?.
HTML 4.01 Sesta lezione 29 Marzo 2004 di Ivano Stranieri.
Come utilizzare gli video ed il Rapporto contatti
HYPER TEXT MARK-UP LANGUAGE
PowerPoint.
Questionari on line GOOGLE DRIVE.
Richiesta Accreditamento dei Soggetti Attuatori
I fogli elettronici Microsoft Excel.
Italsoft srl Guida allo Sportello Italsoft srl
8. Altri oggetti JavaScript
WORD 28/02/2019 Informatica - WORD.
Predisposizione e presentazione della domanda di nullaosta
OLIMPYAWIN software utilizzato per gestire le gare sportive scolastiche in piena autonomia per varie discipline. modulo di iscrizioni on-line che permette.
FATTURE passive FATTURE attivE Dati aggiornati al
Unico 2009 – Esempi per la crisi
Portale Acquisti Alperia
Gestione sito web Ruolo: Redattore.
Transcript della presentazione:

HTML 4.01 Settima lezione 7 Aprile 2004 di Ivano Stranieri

Lezione precedente Cosa sono i FRAME A cosa servono i FRAME Sintassi Lezione precedente Cosa sono i FRAME A cosa servono i FRAME Sintassi Attributi Collegamenti e NOFRAME IFRAME Vantaggi e svantaggi dei FRAME

Cosa vedremo oggi Cosa sono i FORM 1 Cosa vedremo oggi Cosa sono i FORM I moduli per interagire con l’utente Tag INPUT Bottoni Campi testuali Le scelte Altri tipi di campi particolari

2 Cosa sono i FORM I FORM sono delle strutture che permettono all’utente di interagire con il sito web (ad esempio iscrivendosi ad una mailing list) inviando alcuni dati tramite internet. Per interagire con l’utente è necessario raccoglierne i dati e poi utilizzarli in diverse maniere.

L’invio dei dati è normalmente diviso in due fasi: 3 Struttura dei FORM L’invio dei dati è normalmente diviso in due fasi: Una prima pagina in cui l’utente effettua alcune scelte, inserisce dei dati, scrive dei testi… Una seconda pagina a cui vengono inviati questi dati e che si occupa di “lavorarli” (immagazzinarli in un database, processarli, controllarli, ecc…). Questa pagina non è fatta in HTML ma in linguaggi di tipo server-side (PHP, CGI,ASP, JSP…) Le varie informazioni che vengono immesse dall’utente sono inserite all’interno di particolari aree che si chiamano CAMPI

PAGINA WEB CONTENENTE IL FORM 4 Come funziona un FORM PAGINA 2 Controllo: I dati sono corretti? PAGINA WEB CONTENENTE IL FORM SI L’UTENTE LO COMPILA NO PAGINA 1

5 Il tag FORM Per creare un FORM bisogna inserire nella pagina i tag <FORM> … </FORM> Tutti gli elementi che inseriremo dentro al FORM dovranno essere inseriti dentro questi due tag (apertura e chiusura). Attenzione perché il tag <FORM> è un elemento di blocco e lascia, quindi, una riga vuota prima della sua apertura e dopo la sua chiusura.

Esempio: <FORM NAME=“pippo” ACTION=“pippo.html”> 6 Attributi di FORM NAME = serve a dare un nome al form; utilizzando javascript risulterà fondamentale. ACTION = serve a specificare cosa dovrà accadere quando si invia il form compilato (contiene quindi l’url della pagina di risposta). Esempio: <FORM NAME=“pippo” ACTION=“pippo.html”>

Es: <FORM METHOD=“POST”> … </FORM> 7 Attributi: METHOD Quando si inviano i FORM, i dati vengono spediti alla seconda pagina (quella di risposta), secondi due diversi metodi: GET: vengono inviati tutti i dati e questi compaiono nella barra del titolo… POST: viene prima contattata la pagina di risposta e poi vengono inviati i dati => i dati non compaiono nella barra del titolo => metodo più sicuro. Es: <FORM METHOD=“POST”> … </FORM>

Tipo di codifica: ENCTYPE 8 Tipo di codifica: ENCTYPE Normalmente si spediscono solamente testi tramite i FORM. In questo caso la codifica utilizzata è quella testuale. Se invece spediamo anche le immagini o dei file non di testo tramite il FORM, bisogna impostare la codifica nel modo corretto. Le due possibili impostazioni sono: 1) ENCTYPE=“text/plain” 2) ENCTYPE=“multipart/form-data” Es: <FORM ENCTYPE=“text/plain”> … </FORM>

Esempio: <FORM ACTION=“pippo.html” TARGET=“_blank”> 9 1 TARGET Come già visto nel caso dei LINK e nel caso dei FRAME, TARGET permette di specificare al form che la seconda pagina si dovrà aprire in un altro browser differente da quello ove risiede il form stesso. Esempio: <FORM ACTION=“pippo.html” TARGET=“_blank”>

10 Fare ordine… FIELDSET Tramite questo nuovo tag è possibile ordinare i vari campi che compongono il form. Si possono quindi creare delle aree a cui si dare un nome (etichetta) tramite il tag <LEGEND>: <FORM ACTION=“pippo.html” METHOD=“POST”> <FIELDSET> <LEGEND>Dati personali</LEGEND> </FIELDSET> </FORM>

11 1 INPUT Il tag INPUT è tag più utilizzato per creare i campi all’interno dei FORM. Tramite diversi attributi si possono creare molti tipi di campi (testuali, bottoni, tasti di scelta esclusiva) ognuno con diversi valori e con associato sempre un nome (fondamentale per riconoscere il campo nella pagina successiva). I diversi tipi di INPUT si differenziano per il valore assegnato all’attributo TYPE

<INPUT TYPE=“TEXT” NAME=“testo” VALUE=“pippo”> 12 Campi testuali Per creare un campo di semplice testo è sufficiente inserire il valore “TEXT” all’interno dell’attributo TYPE dell’INPUT. Si può associare un valore al campo tramite l’attributo VALUE e tale valore verrà visualizzato al suo interno: <INPUT TYPE=“TEXT” NAME=“testo” VALUE=“pippo”>

13 Campi testuali E’ possibile stabilire la lunghezza del campo testuale con l’attributo SIZE, nonché delimitare il numero di caratteri che l’utente può inserire al suo interno tramite l’attributo MAXLENGHT (questo attributo risulta molto utile per evitare che si commettano errori nell’inserimento ad es. di codici fiscali, CAP altri dati di larghezza conosciuta): Esempio: <INPUT TYPE=“TEXT” NAME=“testo” VALUE=“pippo” SIZE=“10” MAXLENGTH=“5”>

<INPUT TYPE=“BUTTON” NAME=“bottone” VALUE=“premi qui”> 14 Bottoni generici Può servire alle volte di utilizzare il tag INPUT per creare dei pulsanti di tipo generico. In questo caso il TYPE che si specifica è “BUTTON” e il valore che gli viene associato comparirà proprio come testo del bottone: <INPUT TYPE=“BUTTON” NAME=“bottone” VALUE=“premi qui”>

<INPUT TYPE=“PASSWORD” SIZE=“10”> 15 PASSWORD Quando all’interno del campo INPUT bisogna inserire alcuni dati “riservati” quali ad esempio una password al momento della registrazione di un utente, si inserisce il valore PASSWORD all’interno del TYPE dell’INPUT. In questo modo i dati inseriti all’interno del campo saranno asteriscati e non visibili all’utente (notate che non è neanche possibile copiarli e incollarli su altri testi): Esempio: <INPUT TYPE=“PASSWORD” SIZE=“10”>

<INPUT TYPE=“TEXT” VALUE=“pippo e topolino” SIZE=“40” READONLY> 16 Campi di sola lettura Se si vuole impedire che l’utente modifichi il contenuto del campo è possibile inserire al suo interno l’attributo READONLY: Esempio: <INPUT TYPE=“TEXT” VALUE=“pippo e topolino” SIZE=“40” READONLY>

<INPUT TYPE=“TEXT” VALUE=“pippo” DISABLED> 17 Disabilitare i campi Così come è possibile rendere di sola lettura i campi è possibile anche disabilitarli tramite l’attributo DISABLED. Questo attributo è molto utilizzato insieme al linguaggio Javascript per impedire che un form venga inviato più di una volta dall’utente per errore (dopo l’invio del form il tasto di invio viene disabilitato). <INPUT TYPE=“TEXT” VALUE=“pippo” DISABLED>

<INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“roma”> 18 Scelta multipla Un altro valore di TYPE per il tag INPUT è CHECKBOX che permette di creare dei quadratini che l’utente può o meno spuntare con una croce effettuando quindi delle scelte multiple fra diverse alternative. Attenzione: in questo caso per ogni INPUT i NAME sono gli stessi e cambiano solamente i VALUE. <INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“roma”> <INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“milano”> <INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“parma”>

19 Scelta multipla Per default un checkbox non è mai spuntato appena viene caricata la pagina: si può però decidere di impostarlo già selezionato attraverso l’attributo CHECKED. <INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“roma”> <INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“milano”> <INPUT TYPE=“CHECKBOX” NAME=“citta” VALUE=“parma” CHECKED>

20 Scelta esclusiva Se vogliamo che su diverse alternative l’utente ne scelga solamente una, dobbiamo impostare il TYPE dell’INPUT sul valore RADIO, in modo da creare non più dei quadratini ma dei pallini. Una scelta fatta dall’utente escluderà l’altra. Anche in questo caso per far sì che una scelta compaia come già selezionata si utilizza l’attributo CHECKED: <INPUT TYPE=“RADIO” NAME=“citta” VALUE=“roma” CHECKED> <INPUT TYPE=“RADIO” NAME=“citta” VALUE=“milano”>

21 I campi nascosti Se vogliamo inserire un campo nascosto (utile per spedire delle informazioni da una pagina all’altra senza interagire con l’utente) utilizziamo il campo INPUT con il valore del TYPE impostato a HIDDEN: <INPUT TYPE=“HIDDEN” NAME=“nascosto” VALUE=“pippo”>

22 Il tag BUTTON Esaurite le differenze fra i vari tipi di “INPUT TYPE”, scopriamo che esiste anche il tag <BUTTON>. Tale tag se utilizzato in maniera banale è esattamente identico al bottone generico visto in precedenza. La sua particolarità consiste invece nella capacità di comprendere al suo interno tutto il codice HTML che si vuole inserire (e di assumere, quindi, un particolare aspetto tutt’altro che banale).

Il tag BUTTON Esempio: <FORM METHOD=“POST” ACTION=“pippo.html”> 23 Il tag BUTTON Esempio: <FORM METHOD=“POST” ACTION=“pippo.html”> <BUTTON NAME=“pippo”> <B><FONT SIZE="4">Pippo</FONT></B> </BUTTON> </FORM>

24 TEXTAREA Se si vuole dare la possibilità di inserire dentro un form dei testi molto lunghi, si può utilizzare il campo TEXTAREA che visualizza una finestrella indipendente in cui immettere il testo. Gli attributi di questo tag (che si apre e si chiude), oltre al NAME, sono COLS e ROWS che specificano quanto debba essere largo e alto il campo in termini di colonne e di righe che stiamo inserendo. Il testo che inseriamo tra il tag di apertura e il tag di chiusura lo ritroveremo all’interno del campo.

TEXTAREA Esempio: <FORM METHOD=“POST” ACTION=“pippo.html”> 25 TEXTAREA Esempio: <FORM METHOD=“POST” ACTION=“pippo.html”> <TEXTAREA COLS=“30” ROWS=“15” NAME=“testo”> Questo testo lo troveremo nel campo </TEXTAREA> </FORM>

26 MENU’ DI SCELTE Grazie al tag <SELECT> si possono costruire dei menù di scelta. Ogni voce del menù sarà compresa all’interno del SELECT dentro il tag <OPTION> (la cui chiusura è opzionale) con il proprio VALUE. La scelta preimpostata si può definire inserendo dentro il tag OPTION l’attributo SELECTED (come abbiamo visto con CHECKED per i tag già visti).

MENU’ DI SCELTE Esempio: 27 MENU’ DI SCELTE Esempio: <FORM METHOD=“POST” ACTION=“pippo.html”> <SELECT NAME=“scelte”> <OPTION VALUE=“uno”>scelta uno</OPTION> <OPTION VALUE=“due”>scelta due</OPTION> <OPTION VALUE=“tre”>scelta tre</OPTION> </SELECT> </FORM>

<INPUT TYPE=“SUBMIT” VALUE=“Invia”> 28 SPEDIRE UN FORM Per spedire il form è necessario che l’utente clicchi sul relativo tasto di invio. Tale tasto si crea tramite il tag INPUT con l’attributo TYPE impostato su “SUBMIT”. All’interno del VALUE si può inserire un testo che comparirà sul bottone di invio stesso. <INPUT TYPE=“SUBMIT” VALUE=“Invia”>

<INPUT TYPE=“RESET” VALUE=“Ricompila”> 29 Ripristinare il form Utilizzando il tag INPUT con il TYPE impostato sul valore “RESET”, si visualizzerà un bottone che, se premuto, riporterà il FORM ai valori iniziali dei suoi campi cancellando tutto ciò che è stato inserito dall’utente, senza dover ricaricare la pagina: <INPUT TYPE=“RESET” VALUE=“Ricompila”>

Spedire con una immagine 30 Spedire con una immagine Utilizzando il tag INPUT con il TYPE impostato sul valore “IMAGE” è possibile utilizzare una immagine come se questa fosse il tasto SUBMIT. Gli attributi sono quelli relativi al normale tag IMG con cui si inseriscono le immagini: <INPUT TYPE=“IMAGE” SRC=“pippo.jpg” WIDTH=“170” HEIGHT=“220”>

Spedire i dati via e-mail 31 Spedire i dati via e-mail Vediamo un esempio concreto e funzionante (in quanto non ha bisogno di una pagina di risposta creata con un altro linguaggio) per spedire i dati da una pagina con un FORM. Si possono spedire tali dati ad un indirizzo e-mail specificando l’indirizzo dentro il tag <FORM>. I dati partiranno dal client di posta installato sul PC dell’utente e si posizioneranno all’interno di una e-mail con l’elenco dei campi e i valori inseriti dall’utente stesso.

Spedire i dati via e-mail 32 Spedire i dati via e-mail <FORM METHOD=“POST” ENCTYPE=“text/plain” ACTION=“mailto:pippo@pippo.it”> [...] </FORM>