11. Lezione: i form e l'input
Scritto da sergio il 17/07/2009 16:00:19
Un'altra delle funzioni ormai comuni in tutti i siti web e' la raccolta di informazioni dagli utenti/visitatori del sito.
In generale un documento web puo' contenere elementi che permettano l'interazione con gli utenti. Questo aspetto dell'html permette di passare dalla realizzazione di semplici documenti web (come visto finora) a vere e proprie applicazioni web, mettendo a disposizione oggetti grafici per consentire il passaggio di dati come i normali linguaggi di programmazione "visuali". Sto parlando chiaramente di oggetti come caselle di testo, liste a tendina, bottoni, ecc..., ma andiamo con ordine.
Per definire un'area del documento destinata a raccogliere dati per poi inviarli a una qualche destinazione (vedremo quali destinazioni sono possibili), dobbiamo definire un "form" (in italiano potrebbe essere tradotto come "modulo"), ovviamente tramite il tag <form>.
<form id="mioForm" action="destinazione" method="get">
...
</form>
Nell'esempio definiamo un form identificato con "mioForm", esiste anche l'attributo "name" per dare un nome al form, ma con il nuovo xHtml questo attributo e' dichiarato obsoleto e sara' quindi soppiantato dall'attributo "id".
L'attributo "action" invece definisce la destinazione a cui inviare i dati raccolti del form, mentre l'attributo "method", che puo' assumere il valore "get" o il valore "post", rappresenta il metodo di invio dei dati.
Spieghiamo questi ultimi 2 concetti piu' nel dettaglio.
Per "destinazione" a cui inviare i dati si intende una pagina web che puo' essere identificata in modo assoluto (cioe' con l'indirizzo completo) o in modo relativo (la posizione sul server relativamente alla pagina chiamante, vi ricordare gli esempi per le immagini?). Questa pagina web pero' deve contenere del codice di scripting lato server tipo ASP, PHP, ecc..., questo in quanto il semplice html lavora solo lato client, mentre i dati vengono inviati al server e quindi il solo html non e' in grado di leggere i dati inviati al server. Si parla anche, in questo caso, di documenti web "dinamici" in quanto modificano il loro contenuto prima di essere inviati al client (cioe' al browser). Affronteremo questi aspetti nel corso di PHP.
Un'altra destinazione, questa invece utilizzabile direttamente dall'html, e' un indirizzo di mail al quale inviare i dati.
Dobbiamo valorizzare l'attributo "action" con il termine "mailto:" seguito da un indirizzo email valido. Questo meccanismo e' pero' poco usato e si preferisce comunque utilizzare una pagina dinamica anche per l'invio dei dati su una mail. I linguaggi di programmazione lato server, infatti, permettono una validazione dei dati prima del loro invio, tengono nascosto l'indirizzo di posta e hanno molti altri vantaggi.
Infine abbiamo detto del metodo di invio che puo' essere in "get" o in "post". Nel primo caso i nomi delle variabili inviate e il loro valore vengono visualizzati esplicitamente sulla barra degli indirizzi del browser. Dopo il nome della pagina web (es. pagina.html) viene messo un ? (punto interrogativo) e a seguire tutte le variabili e i dati, ogni coppia "nome varibile"="valore" e' separata dalle altre con un & (e commerciale).
Ad esempio con un indirizzo del genere nella barra del browser:
index.html?var1=ciao&var2=10&var3=nome
si stanno inviando 3 variabili e il loro valore alla pagina index.html, per la precisione var1 vale "ciao", var2 vale 10 e var3 vale "nome".
Nel secondo caso invece sulla barra degli indirizzi del browser non viene visualizzato nulla, a parte il nome della pagina di destinazione, e i dati sono inviati senza essere visti esplicitamente (ma e' sufficiente farsi visualizzare il codice sorgente html dal browser per vederli...). Per contenere i dati e' necessario utilizzare gli oggetti di "input" che l'html mette a disposizione e che inizieremo a descrivere dalla prossima lezione.
Questi concetti saranno importanti quando inizieremo lo studio di un linguaggio lato server (il php nel nostro caso).
Nelle prossime lezioni vedremo tutti gli elementi grafici disponibili in html per creare dei moduli di inserimento dati (caselle di testo, bottoni, ecc...)
Alla prossima!
Ultimo aggiornamento 11/01/2020 10:42:06