HTML/Moduli

Il tag <form> si occupa di definire il modulo, tutto ciò che è tra il suo tag d'apertura e quello di chiusura è parte del modulo stesso. Possiamo definire diversi tipi di elementi: campi di testo, checkbox, area di testo e box di selezione. Gli attributi del tag <form> sono action e method.

action: serve per specificare a quale file verranno inviati i dati; solitamente si tratta di uno script lato server, come PHP, ASP o CGI, tanto per citarne alcuni
method: serve a indicare il metodo attraverso il quale saranno inviati i dati alla pagina che li elaborerà. Può assumere i valori get e post:
- con get le informazioni vengono concatenate all'indirizzo del file specificato da action, in questo modo:
  action.php?nome_campo1=valore_campo1&nome_campo2=valore_campo2
- con post le informazioni vengono inviate solo tramite la richiesta HTTP e non sono visibili in maniera evidente all'utente (con appositi programmi è possibile leggere la richiesta HTTP per scovare questi valori, quindi non considerate questo sistema assolutamente sicuro).

La sostanziale differenza tra i due risiede nel fatto che get supporta al massimo 255 caratteri mentre la capacità post è sostanzialmente illimitata.

Tipi di campo

Per poter creare un campo di testo, o una casella ci serviremmo del tag <input>. I principali attributi di <input> sono type (che determina il tipo di elemento), name (che determinano un nome per ogni campo in modo da far comprendere a uno script quali opzioni sono state scelte) e value (per inserire del testo precompilato nei campi).

All'interno dei form è possibile inserire uno o più campi e di vario tipo, facendo uso del tag <input> i cui attributi per definire i tipi di campi sono i seguenti:

Valore	Tipo di campo
text	Campo di testo
radio	Voci da selezionare, mutuamente esclusive
checkbox	Voci per selezione multipla

Il valore text creerà una finestra in cui sarà possibile scrivere ciò che si desidera. Vi sono altri due attributi del tag <input></input> che possono essere molto utili e sono:

size: stabilisce la lunghezza del campo da compilare
maxlength: stabilisce il numero massimo di caratteri che il campo accetterà

Se si vuole oscurare il contenuto di un campo (ad esempio per permettere di inserire una password senza che essa venga visualizzata da altri) è sufficiente inserire password come valore dell'attributo type.

Ecco un esempio di ciò che si è visto finora:

 <body>
  <form action="prova.php" method="post">
   Inserire un nome:
    <input type="text" name="nome" size="20" maxlenght="15"><br />
   Inserire un cognome:
    <input type="text" name="cognome" size="40"><br />
   Inserire una password:
    <input type="password" name="pass" size="40">
  </form>
 </body>

Menu a scelta

È possibile creare dei menù a discesa all'interno dei moduli; questo permetterà all'utente di scegliere tra voci predefinite. Per creare un menù a discesa si usa il tag <select>, </select> al cui interno verrà definita ogni voce attraverso il tag <option>, </option>.

La sintassi per creare un menù a discesa è la seguente: <select name="nome del menù"><option>Testo che si vedrà nel menù</option></select>

Esempio di menù a discesa:

 <body> 
  <form action="prova.php" method="post">
   <select name="menu">
    <option>Wikibooks</option>
    <option>Wikipedia</option>
    <option>Wikisource</option>
   </select>
  </form>
 </body>

Si può anche creare un altro tipo di menù in cui non vi è un menù a cascata ma si scorre semplicemente un elenco. La sintassi per creare questo tipo di menù prevede l'uso dell'attributo size, all'interno del tag <select>, che conterrà come valore il numero delle opzioni del menù.

Esempio di elenco da cui scegliere:

 <body>
  <form action="prova.php" method="post">
   <select name="menu" size="3">
    <option>Wikibooks</option>
    <option>Wikipedia</option>
    <option>Wikisource</option>
   </select>
  </form>
 </body>

Area di testo

Le aree di testo si possono creare utilizzando il tag <textarea> che, a differenza del tag <input>, deve essere chiuso dal suo tag di chiusura </textarea>. Gli attributi del tag <textarea> sono principalmente due:

rows: indica il numero di righe che conterrà l'area di testo
cols: indica il numero di colonne che conterrà l'area di testo

Ovviamente il valore di questi due attributi sarà un numero a nostra discrezione.

Altri due attributi sono name che dà un nome all'area di testo e wrap (un attributo senza valore) che manderà automaticamente a capo il testo che verrà scritto all'interno della textarea.

Ecco un esempio di textarea:

 <body>
  Commenti su wikibooks?
  <form action="prova.php" method="post">
   <textarea name="messaggio" rows="10" cols="50" wrap>Inviaci la tua opinione!</textarea>
  </form>
 </body>

Pulsanti

Esistono due pulsanti che si possono definire tramite l'HTML uno per inviare i dati a un'altra pagina e un altro per resettare i campi di un modulo per poterli ricompilare, il primo è contraddistinto dal valore submit nell'attributo type; il secondo dal valore reset sempre nell'attributo type.

Esempio di pulsante che invia i dati:

 <body>
  <form action="prova.php" method="post">
   <input type="submit" value="Invia!">
  </form>
 </body>

Esempio di pulsante che cancella i dati:

 <body>
  <form action="prova.php" method="post">
   <input type="reset" value="Cancella Tutto">
  </form>
 </body>