Il logo del sito

Appunti su HTML - Moduli

Moduli - parte 2

§ 4.10.1.3 Configurazione di una form per comunicare con un server

I dati di una form possono essere inviati ai server in diversi modi. I più comuni sono HTTP GET o POST.

L'attributo method dell'elemento <form> specifica il metodo da usare, ma non la codifica della form. Per questo si usa la property enctype.

L'attributo enctype specifica come i dati della form saranno codificati. Questo attributo può essere usato solo se method="post"

Valori possibili per enctype sono:

Occorre specificare l'URL del servizio che manipolerà i dati inviati. Questo si fa con l'attributo action.

Per ogni controllo da inviare occorre specificare un nome che sarà utilizzato per referenziare il dato trasmesso. Questo si fa con l'attributo name. I radio button e le checkbox possono distinguersi uno dall'altro assegnando loro diversi valori con l'attributo value.

Nel caso delle checkbox si può selezionare più di un valore. Per poter inviare tutti i valori selezionati al server, occorre assegnare all'attibuto name un array. Vedi, nell'esempio, in nome assegnato alla checkbox per la scelta degli ingredienti: <input type=checkbox name="topping[]" value="Bacon">

L'array superglobal $_POST

L'esempio in oggetto, lato server, processa i dati della form con uno script php. I dati della form sono inviati al server in un array superglobal, $_POST, di tipo associativo, ovvero un array contente coppie key, value. Dove key è il valore dell'attributo name dei campi della form.

La form per ordinare la pizza può essere completata come segue:


<form method="post"
      enctype="application/x-www-form-urlencoded"
      action="echoParametri.php">
   <div><pre><label>Nome cliente: <input name="custname"></label></pre></div>
   <div><pre><label>    Telefono: <input  type=tel name="custtel"></label></pre></div>
   <div><pre><label>      E-mail: <input  type=email name="custemail></label></pre></div>           
   <fieldset>
      <legend> Taglia </legend>
      <div><label> <input type=radio name=size value="piccola"> Piccola</label></div>
      <div><label> <input type=radio name=size value="media"> Media</label></div>
      <div><label> <input type=radio name=size value="grande"> Grande</label></div>
   <fieldset>
   <fieldset>
      <legend> Ingredienti </legend>
      <div><label> <input type=checkbox name="topping[]" value="Bacon"> Bacon</label></div>
      <div><label> <input type=checkbox name="topping[]" value="Funghi"> Funghi</label></div>
      <div><label> <input type=checkbox name="topping[]" value="Cipolla"> Cipolla</label></div>
      <div><label> <input type=checkbox name="topping[]" value="Carciofini"> Carciofini</label></div>
   <fieldset>
   <fieldset>
      <legend> Consegna </legend>
      <div><pre><label>Orario:<input type=time min="11:00" max="23:00" step="900"
            name="delivery"></label></pre></div>
      <div><pre><label>Istruzioni particolari:<textarea name="comments"></textarea></label></pre></div>
   <div><pre><button>Invia</button></pre></div>
</form>
            

Nota sul modo di specificare gli attributi

Nel codice precedente si può notare che il valore assegnato agli attributi, a volte è è racchiuso fra virgolette e a volte no. La sintassi HTML permette ciò. Per un approfondimento sull'argomento si veda:§8 The HTML syntax Quello che mi sento di poter dire è che le virgolette sono necessarie quando l'attributo contiene spazi.

Questo è il risultato finale:

Taglia
Ingredienti
Consegna

Nota

Il processamento eseguito dallo script, specificato con l'attributo action, è la visualizzazione dei parametri inseriti nella form. Ecco il codice. echoParametriPost.php