Informatica 3 Liceo Scientifico Scienze Applicate/Spiegazione Uso Forms

FORM E ESTRAZIONE DATI

L'HTML mette a disposizione una serie di interessantissimi tag il cui scopo è quello di creare moduli con tanto di caselle di testo, opzioni, bottoni di invio ed altro ancora. Il termine tecnico che riassume tutti questi elemento è form ed il loro scopo è quello di creare interazione e scambio dati tra gli utenti ed il sito. Più precisamente, attraverso un form HTML (o modulo che dir si voglia) è possibile "raccogliere" gli input degli utenti per poi inviarli ad un qualche sistema di elaborazione (normalmente uno script lato server).

I form HTML, infatti, permettono la sola realizzazione dell'interfaccia del modulo, ma da soli non offrono il minimo controllo e la minima gestione sui dati inseriti dagli utenti. Per far ciò, come detto, sarà necessario utilizzare degli script in grado di ricevere i dati raccolti dal form per poi eseguirne una qualche elaborazione (ad esempio inserirli all'interno di un database oppure utilizzarli per inviare una mail).

COME SI CREA UNA FORM:

Per la creazione di un form utilizziamo l'omonimo tag form, come nell'esempio che segue:

<form method="" action="" target="">
...
</form>

Scopo di questo tag è di fare da contenitore ad una serie di tag (che vedremo tra poco) che costituiranno gli specifici controlli del modulo. I principali attributi del tag form, come visto nell'esempio, sono i seguenti:

• method - l'attributo "method" determina, appunto, il metodo con cui i dati saranno inviati al server; può avere come valore sia GET (che genera una QueryString) che POST.

• action - specifica lo script che riceverà, controllerà ed elaborerà i dati.

• target - specifica se il frutto dell'elaborazione (effettuata dallo script indicato in action) verrà mostrata nella stessa finestra oppure in un'altra.

Una volta definito un form mediante l'omonimo tag sarà necessario "popolarlo" con una serie di tag annidiati al suo interno. Attraverso i singoli tag (che andremo a vedere tra poco), infatti, sarà possibile creare i vari elementi per l'interazione con l'utente come, ad esempio, caselle di testo o menu di selezione. Passiamo adesso in rassegna i singoli tag che generano gli elementi dei form HTML:

Gli input più utilizzati sono:

 text - è utilizzato per creare caselle di testo in cui l'utente può scrivere del contenuto su "singola linea";

 file - è utilizzato per creare caselle di selezione di file in locale al fine di poterli trasmettere al server remoto;

 radio - permette di creare un gruppo di opzioni al cui interno deve essere fatta una scelta (non ammette scelte multiple);

 checkbox - permette di creare un gruppo di opzioni al cui interno devono essere fatta delle scelte (ammette scelte multiple);

 button - permette di creare bottoni "neutri" ai quali, cioè, può essere associata un'azione mediante Javascript;

 submit - permette di creare bottoni di invio attraverso i quali viene, appunto inviato e processato il form;

 image - permette di inserire immagini "attive" all'interno del modulo che fungeranno da bottoni;

 reset - permette di creare bottoni per il reset del form (in sostanza vengono cancellate le scelte effettuate dall'utente ed il modulo torna al suo stato iniziale).

 select - crea una casella di riepilogo a scorrimento, chiamata in gergo selectbox;

 textarea - genera un'area di testo in cui è possibile andare a capo e viene utilizzata per permettere di inserire descrizioni, commenti o comunque testi piuttosto lunghi.

Vediamo un esempio di un ipotetico form HTML per la raccolta di dati personali:

<form method="post" action="esegui.php">

  <!-- CASELLE DI TESTO -->
  Nome<br>
  <input type="text" name="nome"><br>
  Cognome<br>
  <input type="text" name="cognome"><br>
  
  <!-- SELECTBOX -->
  Paese<br>
  <select name="paese">
  <option value="I">Italia</option>
  <option value="E">Estero</option>
  </select><br>


  <!-- TEXTAREA -->
  Commento<br>
  <textarea name="commento" rows="5" cols="30"></textarea>
  <br><br>

  <!-- SUBMIT -->
  <input type="submit" name="invia" value="Invia i dati">

</form>

ESTRARRE DATI:

Una delle principali possibilità offerte dai linguaggi di scripting lato server è quella di generare contenuti (dinamicamente) sulla base delle richieste degli utenti. Questa interattività si realizza anche attraverso le variabili GET e POST che consentono, appunto, agli utenti di passare al server le loro richieste o preferenze attraverso i form (i classici moduli html) o semplici QueryString. In pratica, attraverso GET e POST è possibile "raccogliere" gli input degli utenti i quali possono essere utilizzati per "indirizzare" il comportamento dei nostri script. Esistono, infatti, due diversi modi per passare dati al server: il metodo POST (generalmente usato nei form) ed il metodo GET (generalmene usato nelle QueryString). Vediamoli separatamente.

LE VARIABILI $_GET E $_POST:

Con il metodo GET i dati vengono passati direttamente all'interno dell'indirizzo web (URL) della pagina, il quale si presenterà accompagnato da un punto di domanda (?) seguito dai dati organizzati in coppie nome/valore (qualora vi siano diverse coppie queste saranno legate tra loro dal simbolo &). Nell'esempio qui sotto abbiamo ipotizzato di avere una pagina dinamica chiamata "esegui.php" in grado di visualizzare informazioni relativamente a diversi dati personali. Il contenuto della pagina "esegui.php" cambierà, ovviamente, ogni volta che varieranno i valori dei parametri inseriti nella form. PHP memorizza i dati passati attraverso la QueryString all'interno della variabile $_GET. Nello specifico del nostro esempio faremo così per recuperarne il valore all'interno della pagina “esegui.php":

?php
//Recupero il valore del parametro "nome"
$nome_utente = $_GET['nome'];

//Recupero il valore del parametro "cognome"
$cognome_utente = $_GET['cognome'];

//Ora stampo semplicemente a video il risultato
echo "Benvenuto " . $nome_utente. "   " . $cognome_utente;
?>

Come avrete notato, per recuperare i dati passati dalla QueryString ho usato $_GET accompagnato da parentesi quadre al cui interno ho scritto (tra gli apici) il nome del parametro da recuperare (come vedremo tra breve useremo la stessa sintassi anche con $_POST). Da questa sintassi possiamo intuire che $_GET (come $_POST) è un array superglobale che, come tale, può essere richiamata in qulunque punto del nostro codice, anche all'interno di funzioni e metodi.

Il metodo POST viene utilizzato per inviare i dati ad una applicazione PHP tramite i form (moduli html). Diversamente dal metodo GET, il metodo POST spedisce i dati in maniera non direttamente visibile per l'utente, attraverso la richiesta HTTP che il browser invia al server.