EL6-1_3AST FORMAutore: __________________________________________ Data: _________Classe: ____

ATTENZIONE

Il significato dei simboli usati in questa e nelle prossime esercitazioni è spiegato dettagliatamente nella guida http://www.classiperlo.altervista.org/Materiale/Generale/Simboli.doc (scaricala e consultala in caso di dubbi).

Il simbolo della manina in colore blu indica una domanda alla quale bisogna OBBLIGATORIAMENTE rispondere scrivendo in colore blu.

Il simbolo della manina in colore blu con la scritta Cou New indica un codice che va incollato usando Courier New in colore blu.

Il simbolo della manina in nero indica una o più immagini o schermate da incollare (protette col tuo watermark, le tue iniziali di Nome e Cognome)

Il simbolo della manina con colori attenuati indica un'operazione che bisogna svolgere, senza rispondere a nessuna domanda (non vuol dire che non devi fare nulla – significa solo che non devi scrivere niente!).

Il simbolo della manina col ciak video indica un video da registrare con Gif Recorder (http://gifrecorder.com/)e da salvare in formato gif nella cartella dell'esercitazione.recupero.

Questo simbolo indica un video di esempio o di spiegazioni da guardare su YouTube

A) OPERAZIONI PRELIMINARI

A1) Crea una cartella di nome ES6 nella tua cartella Esercitazioni.

A2) Crea una sottocartella di ES6 con nome uguale a quello di questa esercitazione (EL6-1_3AST Form)

A3) All'interno della sottocartella EL6-1_3AST Form salva questo file Word

B) DUE TIPI DI FORM

Un form (o modulo) è una serie di campi mediante il quale l'utente può inserire informazioni. In una pagina HTML. I form possono essere utilizzati per:

1. raccogliere dati o invio di messaggi dall'utente2. fare da interfaccia grafica per l'input-output di programmi (script)

Un esempio di form del tipo 1 è un modulo per l'invio di mail o di messaggi da parte del visitatore del sito.

Invece un form del tipo 2 potrebbe per esempio servire per realizzare una pagina web con una calcolatrice, nella quale il form è usato per inserire i numeri e selezionare l'operazione da fare.

B1) Incolla qui sotto una schermata di una pagina a tua scelta contenente un form di tipo 1 (raccolta dati utente):

B2) Incolla qui sotto una schermata di una pagina a tua scelta contenente un form di tipo 2 (interfaccia grafica per i programmi – SUGGERIMENTO: prova a cercare “simple javascript calculator” oppure “simple unit converter online”):

In questa esercitazione ci occuperemo solo di form di tipo 1, cioè usati per la raccolta di informazioni o l'invio di messaggi da parte dell'utente.

Questo tipo di elementi è molto importante, poiché consente al visitatore di entrare in contatto con l'amministratore del sito, fornendo feedback, segnalando errori o, semplicemente, ponendo domande.

C) L'ELEMENTO FORM

L'HTML prevede un apposito elemento per la creazione di form. Si chiama FORM e la sua sintassi è molto semplice:

<form><!—Qui bisogna inserire il contenuto del form --></form>

C1) Form è un elemento di blocco e contenitore. Spiegami cosa significano questi due termini:

C2) →Crea form.html nella cartella dell'esercitazione e inserisci un form (vuoto) nella pagina.

Se adesso provi a visualizzare la tua pagina, non vedrai assolutamente nulla. Le ragioni sono che il tuo form:

1) è vuoto2) non ha dimensioni3) non ha bordi

Proviamo ad aggiungere un bordo e delle dimensioni (a piacere) al form. Questo può essere fatto usando gli stili.

C3) Usa gli stili incorporati nella pagina form.html per assegnare un bordo e delle dimensioni al form.

C4) Incolla una schermata col form visualizzato nel browser:

C5) → Codice CSS degli stili applicati al form

Come vedi un form assomiglia molto ad altri elementi di blocco, come il DIV e P.

D) L'ELEMENTO INPUT PER I TESTI

Un form vuoto non è molto interessante. Per renderlo utile occorre riempirlo con qualche elemento per l'inserimento dei dati (es. il nome o la mail dell'utente).

L'elemento più importante a questo scopo si chiama INPUT.

Ecco qui un semplice esempio di uso dell'elemento input in un form:

<form> Nome utente:<br> <input type="text"></form>

D1) L'elemento INPUT è un elemento vuoto e inline. Spiegami cosa significa:

Osserva l'attributo type="text" assegnato all'elemento input. Questo serve per indicare che si tratta di una casella di testo (cioè di un elemento per l'inserimento di testo; infatti, come vedremo fra poco, esistono altri elementi di tipo input, con funzioni diverse)

Osserva anche Nome utente:<br>, messo all'interno del FORM e accanto all'elemento INPUT.

Un FORM infatti è un normale elemento contenitore, il quale, oltre ad alcuni elementi specifici (come INPUT), può contenere al proprio interno qualsiasi altro elemento HTML appropriato (per es. posso mettere in un form paragrafi P, tabelle TABLE, BR etc).

D2) Modifica form.html in modo da aggiungere al form tre elementi di input come in figura qui sotto (leggi prima il box COME SI FA e sostituisci alla fine la tua schermata al posto della mia):

COME SI FA

Il bordo blu sottile è il bordo del form. Le scritte Nome, Cognome e Username sono in grassetto (usando STRONG).

Per incolonnare in modo ordinato le scritte e le caselle di testo INPUT, è stata usata una tabella nascosta (senza bordo). Ogni coppia scritta+casella di testo occupa due celle di una riga della tabella:

<tr><td> <strong>Nome:</strong> </td><td> <input type="text"></td></tr>Dato che la tabella è usata solo per scopi di presentazione (per il layout del form) e non ha significato semantico, aggiungi l'attributo role="presentation" a TABLE, in modo che la struttura della tabella venga ignorata dai lettori vocali:

<table role="presentation">

D3) → Codice HTML del form e della tabella contenuta

Le dimensioni delle caselle di testo possono essere regolate con gli attributi size e maxlength. Per esempio:

<input type="text" size="40" maxlength="50">

D4) Leggi qui http://www.programmiamo.altervista.org/HTML/form/form3.html e poi spiegami quali sono gli scopi e le differenze fra size e maxlength. Se non ti è chiaro, prova a fare qualche esperimento nel tuo form, in modo da capire bene come si usano.

Un altro attributo che può talvolta essere utile è value. Si usa in questo modo:

<input type="text" value="Pippo">

D5) Prova l'attributo value e poi spiegami a cosa può servire:

E) L'ATTRIBUTO NAME

Lo scopo di un form è:

1. raccogliere una serie di valori (quelli inseriti dall'utente nelle caselle di testo)2. inviare questi valori a un programma di elaborazione (che per esempio li spedisce via mail

al gestore del sito).

Affinché i valori inseriti possano essere raccolti ed elaborati, è necessario dotare ogni elemento input di un attributo name, per esempio in questo modo:

<input type="text" name="Cognome">

Nell'esempio qui sopra Cognome (scritto fra doppi apici) rappresenta il valore dell'attributo name dell'elemento input.

Come puoi notare, l'attributo name assomiglia in qualche modo all'attributo id che già conosciamo da tempo. Come l'id serve per attribuire un nome a un elemento di una pagina HTML, così name serve per attribuire un nome al valore di un elemento di input.

Ci sono però anche alcune importanti differenze. Proviamo a riassumerle qui:

ID serve per attribuire un nome univoco a un qualsiasi elemento HTML è universale (si può usare su tutti gli elementi del BODY) è unico (non può essere duplicato all'interno della stessa pagina)

NAME serve per attribuire un nome al valore di un elemento INPUT in un FORM si può usare solo sugli elementi di un FORM in alcuni casi può essere duplicato all'interno della stessa pagina

Se sei un po' confuso, non ti preoccupare: molti programmatori anche esperti fanno confusione fra queste due cose.

La cosa importante che devi sapere adesso è che name serve solo per etichettare gli elementi input all'interno di un form. Il resto spero sarà più chiaro nel seguito.

Nel caso tu te lo stia domandando, la risposta è sì: è possibile usare sia ID che NAME sullo stesso elemento, per esempio:

<input type="text" name="Cognome" id="Cognome">

Lo scopo però è diverso:

id serve per attribuire stili e posizionamento all'elemento name serve per elaborare i valori inseriti nella casella di testo i due attributi possono essere diversi (es. name="Cognome" id="surname") ma di

solito, per evitare di complicarsi troppo la vita, quando sono usati entrambi, si usano anche gli stessi valori.

E1) Aggiungi un attributo name sensato a tutti gli elementi input del tuo form in form.html e poi incolla qui sotto il codice HTML del form:

Un altro attributo utile da usare nell'elemento input è placeholder. Si usa in questo modo:

<input type="text" placeholder="Inserisci un nome">

E2) Prova placeholder nella tua pagina form.html e incolla qui sotto una schermata:

E3) Spiegami a cosa può servire placeholder (SUGGERIMENTO: prova a cliccare sull'elemento input in cui hai inserito placeholder)

F) INVIARE I DATI DEL FORM ALL'ELABORAZIONE

Normalmente i dati inseriti in un form compilato da un utente vengono inviati al gestore del sito (web master), per esempio recapitandoli nella sua casella mail.

Vedremo più avanti, in un'altra esercitazione, come si fa a spedire via mail i dati di un form. Per adesso voglio mostrarti qualcosa di molto più semplice: voglio solo inviare i dati raccolti a un programma che si limita a visualizzarli in una finestra di pop up.

A tale scopo dobbiamo anzitutto aggiungere al nostro form un pulsante per l'invio dei dati:

<input type="submit" onclick="display()" value="INVIA">

L'aspetto di questo elemento visualizzato nel browser è il seguente:Le cose importanti da notare a proposito di questo elemento sono:

1. si tratta sempre di un elemento INPUT ma stavolta è type="submit" (e non type="text", come nelle caselle di testo viste prima);

2. la differenza visiva fra type="text" e type="submit" è enorme: uno è una casella di testo, l'altro un pulsante;

3. onclick="display()" è un nuovo attributo che in sostanza dice che, quando si fa clic sul pulsante, bisogna eseguire il codice display() (per adesso devi solo copiare e incollare, senza cercare di capire tutto);

4. value="INVIA" specifica la scritta che deve comparire sul pulsante (puoi metterci quello che vuoi tu)

F1) Inserisci un pulsante per l'invio dei dati in fondo a form.html. Puoi scrivere quello che vuoi sul pulsante e lo puoi stilizzare e posizionare a piacere con gli stili. Incolla qui una schermata della pagina con il pulsante:

Se adesso provi a cliccare sul pulsante non accade nulla. Questo perché non abbiamo ancora inserito nella pagina il codice per l'elaborazione dei dati del form.

F2) Il codice da usare è il seguente e va copiato e incollato dentro l'HEAD della tua pagina:

<script> function display(){var f = document.getElementsByTagName('form')[0].getElementsByTagName("input");var stringa="";

for (var i = 0; i < f.length; i++)if (f[i].type!=="radio"&&f[i].type!=="checkbox"&&f[i].type!=="submit"&&

f[i].type!=="reset"&& f[i].type!=="button"|| f[i].checked) stringa += f[i].name + ': ' + f[i].value+"<br>";

var f = document.getElementsByTagName('form')[0].getElementsByTagName("textarea");

for (var i = 0; i < f.length; i++) stringa += f[i].name + ': ' + f[i].value+"<br>";var f = document.getElementsByTagName('form')[0].getElementsByTagName("select");for (var i = 0; i < f.length; i++) stringa += f[i].name + ': ' + f[i].value+"<br>";

xx = window.open("","","width=300,height=250");xx.document.open();xx.document.write(stringa); xx.document.close();} </script>

Nota subito la presenza di un nuovo elemento contenitore <script>. Questo elemento deve stare dentro l'head e al proprio interno contiene un programma scritto in un linguaggio che non è l'HTML (come puoi facilmente notare). Si tratta del linguaggio javascript, del quale ci occuperemo più avanti e in modo molto approfondito.

Per adesso non devi cercare di capire come funziona il programma. Ti faccio solo notare che il nome display(), usato per la function;

function display()è lo stesso usato nell'attributo onclick del pulsante:

<input type="submit" onclick="display()" value="INVIA">

Qualsiasi nome sarebbe andato ugualmente bene, a condizione di usare lo stesso in entrambi i casi (per esempio avrei potuto chiamare la funzione pippo() – sempre con le parentesi tonde – e poi usare lo stesso nome in onclick="pippo()").

F3) Adesso proviamo il funzionamento del programma. Visualizza la pagina form.html nel browser e clicca sul pulsante. Dovrebbe aprirsi una piccola finestra di pop-up nella quale vengono visualizzati i dati inseriti (sostituisci la mia immagine qui sotto con la tua):

Osserva che, cliccando sul pulsante INVIA, i dati presenti nel form vengono cancellati e inviati alla finestra di pop up, nella quale sono visualizzati.

Ogni dato è visualizzato con una coppia di valori: il primo indica l'attributo name dell'elemento input e il secondo indica il valore inserito dall'utente in quell'elemento.

A COSA SERVE?

Se ti stai domandando a cosa serve visualizzare i dati inseriti nel form in questo modo, la risposta è che... non serve a niente! Cioè in realtà, serve per verificare che il form funzioni correttamente e che tutti i dati vengano acquisiti, ma non invia le informazioni via mail e non fa assolutamente nient'altro.

Per vedere questo (invio dei dati via mail) devi aspettare l'esercitazione 6.4Nel frattempo cominciamo ad usare i form e a controllare che funzionino correttamente.

Supponiamo di avere un elemento di input fatto in questo modo:<input type="text" name="Nation">e di aver inserito i seguenti dati:

F4) Come verrebbe visualizzato l'elemento nella finestra di pop up? Con quale coppia di valori?

F5) Valida form.html con NU Validator, controlla che non ci siano errori e incolla qui sotto una schermata:

G) OPERAZIONI FINALI

G1) Controlla di aver risposto a tutte le domande e incollato tutte le schermate. Tutte le

caselline dovrebbero avere un segno X, per indicare che hai risposto

G2) Comprimi le immagini contenute in questo file Word (seleziona un'immagine, scheda Formato e poi Comprimi immagini e infine Applica a tutte le immagini del documento) in modo da ridurne le dimensioni.

G3) Controlla che la cartella di questa esercitazione contenga i seguenti file con i nomi qui indicati:Nome del file Tipo del file DescrizioneEL6-1_3AST Form Word Il file di questa esercitazioneform.html HTML

G4) Chiudi tutti i file, zippa la cartella di questa esercitazione e inviala all'insegnante su Classiperlo.